Navigation Bars

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app. A navigation bar implementation is considered one of the key points of Web design and usability.

Variations

copydone
copydone

Usage

Use a navigation bar to aid visitors in accessing the information on your app. A navigation bar appears at the top of the screen across a website or app, allowing visitors to access the most useful pages quickly.

Specs

A navbar consists of the following main components:

  • Header: a <header> container for the navbar. It includes a <div> that acts as a container that prevents the content to spread to the full width of the page (to increase readability). Removing the max-w-* classes from that inner <div> will allow the navigation to expand to the full width. Add a "sticky top-0" class to the <header> to make it stick to the top of the screen as users scrolls down.
  • Brand: the company logo (text, image or both).
  • Navigation links: a list that contains links to your main pages. It uses a <nav> element that includes a list for the links. The height of the whole navbar is defines in this <nav> (in our examples 5.5rem (88px)). On small screens, the list of links when open expands to the full height of the screen.
  • Actions: Extra actions that can be useful to reside on the navbar (CTA button, user avatar, cart icon etc).
  • Mobile menu trigger button: visible only on small screens, it allows the menu to expand.
  • Top bar (optional): a two-column layout that can host extra information (like social icons or a phone number). The text in the top bar is 0.875rem (14px) and its total height is 2.25rem(36px).

Accessibility notes

  • The navigation list wrapper should have a role="navigation" (not required if a native <nav> is used.)
  • The trigger button has an aria-expanded role with a true/false value, that allows vocalizing menu states (open or closed).
  • If a user is on a page that is within the navigation menu the aria-current="page" attribute should be assigned to the item corresponding to the active page.
  • A role="menuitem" is used on all the menu links to indicate that an element is an option in a set of choices contained by the navbar.

Check out the latest release!