Refine By

Desktop navbar

  • Contents:


  • 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



Top rail

Left rail



Navbar links must be clear to users. Use obvious words and symbols (“signifiers”) when labeling them.

A navbar with clear link names and symbols

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

A navbar, fixed to the top of the screen, still visible as 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.



Top nav for a Waldorf Astoria


Top nav for



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 elements

Related components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 4:28pm Initial content entry