Vertical Navigation Section | Legacy Components | Lightning Component Reference

lightning:verticalNavigationSection

Represents a section within a lightning:verticalNavigation. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-vertical-navigation-section.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning:verticalNavigationSection component is a section that can contain the following components.

lightning:verticalNavigationItem
lightning:verticalNavigationItemBadge
lightning:verticalNavigationItemIcon

Sections are helpful for categorizing your navigation items. Each section is displayed with a header title based on the label attribute.

This example creates a vertical navigation menu with two sections.

1<lightning:verticalNavigation selectedItem="recent">
2  <lightning:verticalNavigationSection label="Reports">
3    <lightning:verticalNavigationItem label="Recent" name="recent" />
4    <lightning:verticalNavigationItem label="Created by Me" name="created" />
5    <lightning:verticalNavigationItem label="All Reports" name="all" />
6  </lightning:verticalNavigationSection>
7  <lightning:verticalNavigationSection label="My Accounts">
8    <lightning:verticalNavigationItem label="Recent" name="recent_account" />
9    <lightning:verticalNavigationItem label="Created by Me" name="created" />
10  </lightning:verticalNavigationSection>
11</lightning:verticalNavigation>

For more information, see the lightning:verticalNavigation documentation.

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
label	The heading text for this section.	String
title	Displays tooltip text when the mouse moves over the element.	String