Vertical Navigation
lightning-vertical-navigation
A vertical list of links that either take the user to another page or parts of the page the user is in.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
A lightning-vertical-navigation component represents a list of links that's only one level deep, with support for overflow sections that collapse and expand.
To create an overflow section, use lightning-vertical-navigation-overflow. The overflow section doesn't adjust automatically based on the view port.
lightning-vertical-navigation implements the vertical navigation blueprint in the Salesforce Lightning Design System (SLDS). The vertical navigation adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.
| SLDS 1 | SLDS 2 | |
|---|---|---|
| Design | Vertical Navigation | Vertical Navigation |
| For Use In | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | Lightning Experience |
Use lightning-vertical-navigation together with these sub-components.
lightning-vertical-navigation-sectionlightning-vertical-navigation-itemlightning-vertical-navigation-overflowlightning-vertical-navigation-item-badgelightning-vertical-navigation-item-icon
This example creates a basic vertical navigation menu.
To define an active navigation item, use selected-item="itemName" on lightning-vertical-navigation, where itemName matches the name of the lightning-vertical-navigation-item component to be highlighted.
This example creates a navigation menu with a highlighted item and an overflow section.
To determine which navigation item is selected, use the event.detail property on the onselect event handler.
The onselect event handler returns the name of the navigation item that's selected.
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 by wrapping in a div and specifying 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.
beforeselect
The event fired before a navigation item is selected.
The beforeselect event returns the following parameter.
| Parameter | Type | Description |
|---|---|---|
| name | string | The name of the item to be selected, which matches the name value on the vertical-navigation-item component. |
The event properties are as follows.
| Property | Value | Description |
|---|---|---|
| bubbles | false | This event does not bubble. |
| cancelable | true | This event can be canceled. You can call preventDefault() on this event. |
| composed | false | This event does not propagate outside the template in which it was dispatched. |
select
The event fired when a navigation item is selected.
The select event returns the following parameter.
| Parameter | Type | Description |
|---|---|---|
| name | string | The name of the selected item, which matches the name value on the vertical-navigation-item component. |
The event properties are as follows.
| Property | Value | Description |
|---|---|---|
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call preventDefault() on this event. |
| composed | false | This event does not propagate outside the template in which it was dispatched. |