---
schema_version: "1"
id: be228287653a31b2dfd0e1f1499b65fa68e130e91dc8965c294b9bfc40b5eb76
title: Vertical Navigation
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/verticalNavigation/lightning-vertical-navigation.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-vertical-navigation.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 773f5b86a22e642d7126c602e9f47f0321825af90a672adbda205ca6f4fb35dd
products:
- Lightning Component Reference
---
# 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
::::::tabset{tabs='["Example", "Develop", "Specifications"]'}
:::::tab
::component-playground{component="verticalNavigation" model="lwc" namespace="lightning"}
:::::
:::::tab
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.
## Design
`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](https://v1.lightningdesignsystem.com/components/vertical-navigation/) | [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation/) |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |
## Usage
Use `lightning-vertical-navigation` together with these sub-components.
- `lightning-vertical-navigation-section`
- `lightning-vertical-navigation-item`
- `lightning-vertical-navigation-overflow`
- `lightning-vertical-navigation-item-badge`
- `lightning-vertical-navigation-item-icon`
This example creates a basic vertical navigation menu.
```html
```
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.
```html
```
## Select a Navigation Item
To determine which navigation item is selected, use the `event.detail` property on the `onselect` event handler.
```html
```
The `onselect` event handler returns the name of the navigation item that's selected.
```javascript
import { LightningElement } from "lwc";
export default class VerticalNavigationExample extends LightningElement {
handleSelect(event) {
const selectedName = event.detail.name;
}
}
```
## 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 by wrapping in a div and specifying width using CSS.
```html
...
```
## 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.
## Custom Events
**`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. |
:::::
:::::tab
::component-specification{component="verticalNavigation" model="lwc" namespace="lightning"}
:::::
::::::