Vertical navigation

VerticalNavigation supports two appearances: indicator and bordered.

Nest navigation items under a parent navigation item to create a multilevel structure.

• Use Divider to visually separate nested items.

Compose VerticalNavigation with Collapsible to create a collapsible menu structure. When a top-level submenu is expanded a separator is displayed between it and the next item. When a submenu is collapsed, the separator is not displayed.

• When a collapsed submenu contains an active navigation item, the parent item should be set to active. This allows users to see where they are in the navigation hierarchy even when the submenu is collapsed.
• Limit expandable sections to two levels.

Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.

Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.

You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.

• Follow the badge accessibility guidelines.
• Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.

It's recommended to provide a skip link to bypass the vertical navigation for a better keyboard navigation experience.

Note: If the navigation appears across multiple pages and there is no “Skip to main” link as the first item on the page, to meet WCAG 2.4.1 requirement for bypassing repeated content a skip link is required.

VerticalNavigation supports two appearances: indicator and bordered.

Nest navigation items under a parent navigation item to create a multilevel structure.

• Use Divider to visually separate nested items.

Compose VerticalNavigation with Collapsible to create a collapsible menu structure. When a top-level submenu is expanded a separator is displayed between it and the next item. When a submenu is collapsed, the separator is not displayed.

• When a collapsed submenu contains an active navigation item, the parent item should be set to active. This allows users to see where they are in the navigation hierarchy even when the submenu is collapsed.
• Limit expandable sections to two levels.

Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.

Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.

You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.

• Follow the badge accessibility guidelines.
• Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.

It's recommended to provide a skip link to bypass the vertical navigation for a better keyboard navigation experience.

Note: If the navigation appears across multiple pages and there is no “Skip to main” link as the first item on the page, to meet WCAG 2.4.1 requirement for bypassing repeated content a skip link is required.

VerticalNavigation supports two appearances: indicator and bordered.

Nest navigation items under a parent navigation item to create a multilevel structure.

• Use Divider to visually separate nested items.

Compose VerticalNavigation with Collapsible to create a collapsible menu structure. When a top-level submenu is expanded a separator is displayed between it and the next item. When a submenu is collapsed, the separator is not displayed.

• When a collapsed submenu contains an active navigation item, the parent item should be set to active. This allows users to see where they are in the navigation hierarchy even when the submenu is collapsed.
• Limit expandable sections to two levels.

Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.

Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.

You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.

• Follow the badge accessibility guidelines.
• Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.

It's recommended to provide a skip link to bypass the vertical navigation for a better keyboard navigation experience.

Note: If the navigation appears across multiple pages and there is no “Skip to main” link as the first item on the page, to meet WCAG 2.4.1 requirement for bypassing repeated content a skip link is required.