Anatomy
- Heading: (Optional) Groups related navigation items under a labeled category
- Item: A top-level navigation link that directs the user to a page or section.
- Leading visual: (Optional) An icon or graphic placed before the item label to aid recognition.
- Counter: (Optional) A numerical indicator associated with an item or sub-item (e.g., unread messages, pending tasks).
- Sub-item: (Optional) A nested navigation link that sits under an item, used for secondary destinations.
Usage Guidelines
When to use this component
- When an area of the product contains multiple related views that each have their own page
- When you need navigation with a hierarchical structure.
When not to use this component
- Don’t use for organizing same-page content; use Tabs instead.
- Don’t use for triggering single actions; use a Button instead.
Best Practices
Use short and scannable labels for navigation items.
Avoid using long labels. Long text gets truncated.
Use the heading to clarify the navigation's list category.
Don't omit the headings if the navigation list is not self-explanatory.
Use the counter property to add supplementary information about the navigation item e.g. number of new messages.
Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.
Use leading visual e.g. icon to help user understand what navigation item represents
Don’t mix or skip leading visuals. If you include them, use them consistently across all items in a navigation list.
Use multiple navigation list to create different groups.
Don’t include anything other than navigation items in the list, and don’t add extra interactive elements inside a navigation item
General Component Behaviors
Width
Navigation list stretches the full-width of it’s container
Long labels
When space is limited, labels will be truncated to not break the visual order of items.
Item with sub-items
Navigation item that holds sub-item acts as a button, not a link. Clicking it will show/hide sub-items and will not navigate to a new page.
States
Variant
With Heading
Navigation list includes a heading describing the category of items.
With sub-items
Parent item expands or collapses to reveal nested navigation links underneath.
With leading visual
Item includes an icon or a graphical element before the label to aid quick recognition.
With counter
Item displays a counter to indicate additional information, such as unread messages or pending tasks.
With counter + leading visual
Combines both an icon and a counter on the same item, supporting quick recognition and contextual information at once.
Content Guidelines
- Labels should be nouns, not verbs.
- Keep labels short, ideally one or two words.
- Headings should clearly indicate the category of items below.
- Only use counters when they provide meaningful context (e.g., pending tasks, unread messages).
For further information, see the Content Styleguide.
Known Gaps
- Leading visual can’t be added to items that include sub-items.