IMPORTANT: As we revamp and transition our documentation to this site, you may find the articles you need on Liferay's Help Center.

Analytics Cloud Commerce Courses DXP / Portal DXP Cloud Reference

Documentation Menu

Highlighting

Remove Highlighting

Go Back

• Getting Started
• Site Building
• Content Authoring and Management
• Process Automation
• Using Search
• Collaboration and Social
• Users and Permissions
• System Administration
• Building Applications
  • Objects
  • Developing a JavaScript Application
  • Developing a REST Web API
  • Developing a Java Web Application
    • Using MVC
      • Using a JSP and MVC Portlet
      • Rendering Views with MVC Portlet
      • Invoking Actions with MVC Portlet
      • MVC Action Command
      • MVC Render Command
      • MVC Resource Command
      • Portlet Preferences
      • Using Localized Messages in an MVC Portlet
      • Sharing Localized Messages
      • Tag Libraries
        • Liferay Theme Objects For JSPs
        • Liferay Portlet Objects For JSPs
        • Alloy UI (AUI) Tag Library
        • Clay Tag Library
          • Clay Alerts
          • Clay Badges
          • Clay Buttons
          • Clay Cards
          • Clay Dropdown Menus and Action Menus
          • Clay Form Elements
          • Clay Icons
          • Clay Labels and Links
          • Clay Management Toolbar
          • Clay Navigation Bars
          • Clay Progress Bars
          • Clay Stickers
        • Liferay UI Tag Library
        • Liferay Frontend Tag Library
        • Liferay Util Tag Library
        • Chart Tag Library
    • Using Spring
    • Using JSF
    • Using Bean Portlet
    • Reference
  • Core Frameworks
  • Data Frameworks
  • Remote Apps
  • Tooling
  • Reference
  • App Builder
• Liferay Internals
• Headless Delivery
• Installation and Upgrades

English

• Japanese
• English

• Liferay Learn
• DXP
• Building Applications
• Developing a Java Web Application
• Using MVC
• Tag Libraries
• Clay Tag Library
• Clay Navigation Bars

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