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

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center