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.

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.

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

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.

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.

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

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.

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.

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