Navigation

The header navigation is the upper (top) part of a web page that helps the user navigate a site. Headers should be as helpful as possible, with clear and accessible links to everywhere the user may need to go. The navigation menu should always have a white background and sticky at the top.

Sticky tab menus are used when there the content can be split into different categories. The menu items can either lead users to a new page or navigate them to a different tab within the same page. On smaller viewports, the menu can overflow and trigger horizontal scrolling or switched into a drop-down component.

Breadcrumb navigation can be used on pages with multiple navigation levels. In large viewports, all levels of a navigation path are shown, in small viewports only the current page and section of the path.