Global sidebar navigation
The navigation components are lists of links that allow users to move throughout the application. Both the primary and secondary navigation display in the sidebar.
Variants
Section titled “Variants”
Section titled “In Practice”The main nav and sub nav sidebars have some key differences explained below.
Main Navigation
Section titled “Main Navigation”The main nav is collapsed (only icons are shown) by default. It expands to show the text labels on hover. Main nav has two slots for content items:
- Primary slot
- Product logo
- Nav items
- Dividers as needed
- Secondary slot
- Nav items
- Notifications
- Avatar
Sub Navigation
Section titled “Sub Navigation”The sub nav is dependent on the main nav; its content is based on the selection made in the main nav. The sub nav sidebar always displays along with the main nav and is expanded (shows icons and text labels) by default. The option to collapse is displayed to the user on hover.
Contents include:
- Subheaders
- Nav links
- Dividers as needed
Section titled “Accessibility”- Navigation should be operable using the keyboard alone.
- All navigation contents should be announced by screen readers.
For more information, see our