Clay Navigation Bars

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() %>"
/>

Inverted navigation bar (set inverted attribute to true):

<clay:navigation-bar
    inverted="<%= true %>"
    navigationItems="<%= navigationBarsDisplayContext.getNavigationItems() %>"
/>

Related Topics

• Clay Dropdown Menus and Action Menus
• Clay Form Elements
• Clay Progress Bars