lightning:verticalNavigation

Represents a vertical list of links that either take the user to another page or parts of the page the user is in. This component requires API version 41.0 and later.

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 inherits 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.

1<aura:component>
2    <lightning:verticalNavigation>
3            <lightning:verticalNavigationSection label="Reports">
4                <lightning:verticalNavigationItem label="Recent" name="recent" />
5                <lightning:verticalNavigationItem label="Created by Me" name="created" />
6                <lightning:verticalNavigationItem label="Private Reports" name="private" />
7                <lightning:verticalNavigationItem label="Public Reports" name="public" />
8                <lightning:verticalNavigationItem label="All Reports" name="all" />
9            </lightning:verticalNavigationSection>
10        </lightning:verticalNavigation>
11</aura:component>

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.

1<aura:component>
2    <lightning:verticalNavigation selectedItem="recent">
3        <lightning:verticalNavigationSection label="Reports">
4            <lightning:verticalNavigationItem label="Recent" name="recent" />
5            <lightning:verticalNavigationItem label="All Reports" name="all" />
6        </lightning:verticalNavigationSection>
7        <lightning:verticalNavigationOverflow>
8            <lightning:verticalNavigationItem label="Regional Sales East" name="east" />
9            <lightning:verticalNavigationItem label="Regional Sales West" name="west" />
10        </lightning:verticalNavigationOverflow>
11    </lightning:verticalNavigation>
12</aura:component>

Dynamically Creating a Navigation Menu

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.

1<aura:component>
2    <aura:attribute name="navigationData" type="Object" description="The list of sections and their items." />
3    <aura:handler name="init" value="{! this }" action="{! c.init }" />
4    <lightning:verticalNavigation>
5            <aura:iteration items="{! v.navigationData }" var="section">
6                <lightning:verticalNavigationSection label="{! section.label }">
7                    <aura:iteration items="{! section.items }" var="item">
8                        <aura:if isTrue="{! !empty(item.icon) }">
9                            <lightning:verticalNavigationItemIcon
10                                label="{! item.label }"
11                                name="{! item.name }"
12                                iconName="{! item.icon }" />
13                            <aura:set attribute="else">
14                                <lightning:verticalNavigationItem
15                                    label="{! item.label }"
16                                    name="{! item.name }" />
17                            </aura:set>
18                        </aura:if>
19                    </aura:iteration>
20                </lightning:verticalNavigationSection>
21            </aura:iteration>
22        </lightning:verticalNavigation> 
23</aura:component>

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

1({
2    init: function (component) {
3        var sections = [
4          {
5            label: "Reports",
6            items: [
7              {
8                label: "Created by Me",
9                name: "default_created"
10              },
11              {
12                label: "Public Reports",
13                name: "default_public"
14              }
15            ]
16          },
17          {
18            label: "Dashboards",
19            items: [
20              {
21                label: "Favorites",
22                name: "default_favorites",
23                icon: "utility:favorite"
24              },
25              {
26                label: "Most Popular",
27                name: "custom_mostpopular"
28              }
29            ]
30          }
31        ];
32        component.set('v.navigationData', sections);
33    }
34})

Usage Considerations

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.

1.THIS {
2    width: 320px;
3}

Accessibility

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.

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`ariaLabel`	String	The aria-label attribute for the navigation component.
`class`	String	A CSS class for the outer element, in addition to the component's base classes.
`compact`	Boolean	Specify true to reduce spacing between navigation items. This value defaults to false.
`onbeforeselect`	Action	Action fired before an item is selected. The event params include the `name` of the selected item. To prevent the onselect handler from running, call event.preventDefault() in the onbeforeselect handler.
`onselect`	Action	Action fired when an item is selected. The event params include the `name` of the selected item.
`selectedItem`	String	Name of the nagivation item to make active.
`shaded`	Boolean	Specify true when the vertical navigation is sitting on top of a shaded background. This value defaults to false.
`title`	String	Displays tooltip text when the mouse moves over the element.

Lightning Components Developer Guide

lightning:verticalNavigation

Attributes