Vertical Navigation

A lightning:verticalNavigation component represents a list of links that's only one level deep, with support for overflow sections that collapse and expand. The overflow section must be created using lightning:verticalNavigationOverflow and does not adjust automatically based on the view port.

This component implements styling from vertical navigation in the Lightning Design System.

lightning:verticalNavigation is used together with these sub-components.

• lightning:verticalNavigationSection
• lightning:verticalNavigationItem
• lightning:verticalNavigationOverflow
• lightning:verticalNavigationItemBadge
• lightning:verticalNavigationItemIcon

This example creates a basic vertical navigation menu.

To define an active navigation item, use selectedItem="itemName" on lightning:verticalNavigation, where itemName matches the name of the lightning:verticalNavigationItem component to be highlighted.

This example creates a navigation menu with a highlighted item and an overflow section.

To create a navigation menu via JavaScript, pass in a map of key-value pairs that define the sub-components. Here's an example that creates a navigation menu during component initialization.

The client-side controller creates two sections with two navigation items each.

If you want a navigation menu that's more than one level deep, consider using lightning:tree instead.

The navigation menu takes up the full width of the screen. You can specify a width using CSS.

Use the Tab and Shift+Tab keys to navigate up and down the menu. To expand or collapse an overflow section, press the Enter key or Space Bar.