navigationBar - Navigation Bar

Provides a navigation bar that can be added to an XPage.

Category

Responsive

Syntax

<xe:navbar id="id_text">content & dashboard nodes</xe:navbar>

You can now add Navigation Bars to any XPage without needing to rely on the Application Layout control. Navigation Bars are typically used at the top and/or bottom of a page and provide links and dropdown menus to navigate around your application. The Navigation Bar can also be added anywhere in the page contents (in the middle, for example). You also have the ability to add other controls to the content of the Navigation Bar - for example, adding a search field in a bottom Navigation Bar.

Table 1. All properties
Category Properties Description
basics headingText Provides the text that will appear at the start of the Navigation Bar, such as the application name or company name.
fixed Indicates the position of the Navigation Bar. There are three options: fixed-top (the Navigation Bar is fixed to the top of the page), fixed-bottom (the Navigation Bar is fixed to the bottom of the page), unfixed-top (the Navigation Bar is positioned at the top of the application, but not fixed in place). When fixed, the Navigation Bar will remain in place at the top or bottom of the browser window when scrolling. If no value is set, the Navigation Bar will "float" in place on the page.
inverted Boolean. Indicates if the Navigation Bar should use an inverted color styling. The inverted style gives the Navigation Bar a dark background with light colored text. False by default.
pageWidth Determines the width of the Navigation Bar content: full means use the full width of the browser, fluid means use the Bootstrap fluid container (almost full width), and fixed means use the Bootstrap fixed width container, which fixes the width of the content of the container to a central column in the application.
<xe:this.navbarBeforeLinks>nodes</xe:this.navbarBeforeLinks> Provides a set of links or menus that appear in the Navigation Bar - before the Navigation Bar content area. See treeNodes for information on the content of supported nodes and refer to the example in this topic for a usage example.
<xe:this.navbarAfterLinks>nodes</xe:this.navbarAfterLinks> Provides a set of links or menus that appear in the Navigation Bar - after the Navigation Bar content area. See treeNodes for information on the content of supported nodes and refer to the example in this topic for a usage example.
styling headingStyle Specifies a CSS style property to define the visual style of the heading of the Navigation Bar.
headingStyleClass Specifies a CSS style class(es) property to define the CSS class(es) assigned to the heading of the Navigation Bar.
style Specifies a CSS style property to define the visual style of the Navigation Bar.
styleClass CSS style classes property. Defines the CSS class(es) assigned to the Navigation Bar.

Usage

To find out more information about specific properties, click All Properties when in Design Mode and look for your desired property under its respective category.

Examples

This code example shows a Navigation Bar control that has links before and after the Navigation Bar content:
<xe:navbar id="navBar1"
	headingText="Navbar Heading"
	inverted="true"
	fixed="fixed-top"
	pageWidth="fixed"
	headingStyle="font-weight:bold;">
	<xe:this.navbarBeforeLinks>
		<xe:basicContainerNode label="Menu">
			<xe:this.children>
				<xe:pageTreeNode page="/home.xsp" label="Home"></xe:pageTreeNode>
				<xe:basicLeafNode label="ibm.com" href="http://www.ibm.com"></xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
	</xe:this.navbarBeforeLinks>
	<xe:this.navbarAfterLinks>
		<xe:pageTreeNode page="/home.xsp" label="Home"></xe:pageTreeNode>
		<xe:basicLeafNode label="ibm.com" href="http://www.ibm.com"></xe:basicLeafNode>
	</xe:this.navbarAfterLinks>
	<xp:label value="Navbar Content Area" id="label1"></xp:label>
</xe:navbar>