Inserting a navigation bar
A navigation bar is a set of links to other Web pages, displayed as a horizontal or vertical bar, in a Web site.
- Create a Web project.
- Create a Web site structure.
- Create or import Web resources.
- Create a Web page template (optional).
Note: If you use a page template to govern the layout and visual design of all of the pages in a Web site, you can insert a navigation bar onto the page template, rather than adding the navigation to every page individually. The links in the navigation bar are then updated dynamically for each individual page in the site.
By default, all Web pages are shown in the navigation and appear in the navigation bar; however, typically, not all pages in a site are listed in the navigation bar. Usually the navigation bar contains links to other, closely related pages in a site. For example, the navigation bar usually contains a link to the home page, or the site's main page, because that page functions as the site's focal point. In Web Site Navigation, this page is referred to as the top page.
You can specify which pages link from the navigation bar. You can set link preferences so that each page's navigation bar is dynamically created to reflect those preferences. For instance, if you select that all child pages are to be included in a navigation bar, then the navigation bar for each page dynamically links to only that particular page's child pages.
You can insert a navigation bar into a Web page by inserting a navigation object from the Palette view. The following table shows you the difference between the different navigation bar options of the Web Site Navigation:
Navigation type Navigation icon Horizontal Bar Horizontal Tabs Vertical Bar Vertical Tabs To insert a navigation bar into a Web page, do the following:
- To open Web Site Navigation, expand your Web project in the Project Explorer view and double-click
Web Site Navigation.
- Double-click a page icon in Web Site Navigation to open the Design page in Page Designer.
- Select the Web Site Navigation drawer in the Palette view. You have the following navigation bar options:
- Horizontal Bar
- Horizontal Tabs
- Vertical Bar
- Vertical Tabs
- Choose the style of navigation you want to insert and drag and drop the palette object onto the page. Depending on which navigation bar you choose, one of several insert windows opens.
- Select whether you want to use a
Sample or a
User-defined navigation bar. If you want to use a sample navigation bar, select one of the
Thumbnail images and the
File name field is populated. If you have a user-defined navigation bar, you can click Browse to locate the file in the
Current project or
Import the file from the file system. Select your user-defined navigation bar and the
File name field is populated. Click Next.
- Select the type of links that you want to appear in the navigation bar. You can select links based on page relationships. For example, you can select links based on parent-child relationships or you can select links based on sequence (previous and next pages). If you select previous or next links, you can supply a label to appear for those links, such as Back and Forward. You can select from the following types of links:
- Top page
- Children of top page
- Ancestor page
- Parent page
- Sibling pages
- Current page
- First child page
- Children pages
- Previous page
- Next page
- Level
- Group
- If the Web page or page template to which you are adding the navigation is a JSP or Faces JSP page, click Next. On the Optional Settings for Specification File page of the wizard, select the navigation type that you want to use. If the page or page template is a Faces JSP page, select HTML Navigation and Use Faces link in order to create an HTML custom tag with outputLink tag for Faces.
- Click Finish. A navigation icon is inserted on the page or template to indicate that a navigation component exists.
- Press CTRL+S to save your changes. The navigation bar is inserted on the page. Note that you cannot change the type of navigation bar after it is added to the page.
Related concepts
Related tasks