Refine By

Desktop navbar

  • 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.

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.

Style

 

Top nav for a Waldorf Astoria

 

Top nav for Hilton.com

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 elements

Related components

Version History

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