Similar to dropdown menus, navigation bars display a list of navigation items. The key difference is navigation bars are displayed in a horizontal bar with all navigation items visible at all times. The navigation bar also indicates the active navigation item with an underline. Navigation bars come in two styles: white background with dark-grey text (default) and dark-grey background with white text (inverted).
Default navigation bar:
<clay:navigation-bar
navigationItems="<%= navigationBarsDisplayContext.getNavigationItems() %>"
/>
Figure 1: You can include navigation bars in your apps.
Inverted navigation bar (set inverted attribute to true):
<clay:navigation-bar
inverted="<%= true %>"
navigationItems="<%= navigationBarsDisplayContext.getNavigationItems() %>"
/>
Figure 2: Navigation bars can be inverted if you prefer.