- Contents:
Navbars:
- Are a navigational pattern for desktop only
- Contain links to individual pages or expand to reveal submenus
- Typically appear at the top or left-hand side of a page
Types
Top rail
Left rail
Guidelines
Navbar links must be clear to users. Use obvious words and symbols (“signifiers”) when labeling them.

Make your navbars sticky – affixed to the top of the window – so they stay visible even when the user scrolls down.

Limit your navbar to six or fewer top-level elements.


- Ensure a navbar fits on one line only.
- Always simplify a navbar for it to fit on one line or break it up into primary and secondary menus using drop downs or mega menus.
Navbars must fit on just one line. When necessary, combine links into dropdowns or mega menus to reduce the top-level items.


Style
Accessibility
Ensure navigational system is keyboard accessible. Users should be able to tab through each link.
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.
Related components
Version History
Date/Time of Change | Who Made the Change | Change Details |
---|---|---|
May. 08 2017 4:28pm | Initial content entry |