Navigation Bar - Overview
Purpose
The Navigation Bar is used for
- Page navigation (directing users to a different page)
- In-page navigation via anchor links (moving to a different section on the current page)
- as a Tab-style component to conditionally render content (this is a development specific requirement).
The Navigation Bar and the Tabs component look
identical, but are semantically different and serve different purposes.
Anatomy
The component can be broken down into the following elements -
Text label
The text label describes the content of the individual nav item to the user.Trim
The trim shows the user which item is selected.Horizontal line
This line spans the whole with of the Navigation Bar component, to keep the items visually connected.Background & bottom stroke (optional)
Optional fill and bottom stroke across the whole width of the viewport for when the component is used for anchor links and content scrolls behind it.
Variants & States
- Breakpoint: Mobile, Desktop
- # of Links: 2-6
- Content overflow: off/on
- OnScroll: off/on
The NavBar component is made up of individual items.
- State: Active, Inactive, Hover, Focus
- Icon: off/on
- Additional line: off/on
