Vertical Navigation
Navigation represents a list of links that either take the user to another page or parts of the page the user is in.
ListRequires ui:scrollerWrapper
Preview
About Vertical Navigation
Radio Group Variant
The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the Vertical Tabs component.
Overview of CSS Classes
| Selector | .slds-nav-vertical |
|---|---|
| Summary | |
| Restrict | nav, fieldset |
| Variant | True |
| Selector | .slds-nav-vertical_compact |
|---|---|
| Summary | Modifer to reduce spacing between navigation items |
| Restrict | .slds-nav-vertical |
| Modifier | True |
| Selector | .slds-nav-vertical_shade |
|---|---|
| Summary | Modifier to adjust list item when vertical navigation is sitting on top of a shaded background |
| Restrict | .slds-nav-vertical |
| Modifier | True |
| Selector | .slds-nav-vertical__title |
|---|---|
| Summary | Section title of the vertical navigation |
| Restrict | .slds-nav-vertical h2, .slds-nav-vertical legend |
| Selector | .slds-nav-vertical__item |
|---|---|
| Summary | List of the vertical navigation |
| Restrict | .slds-nav-vertical li, .slds-nav-vertical span |
| Selector | .slds-is-active |
|---|---|
| Summary | Active state of a list item within a vertical navigation |
| Restrict | .slds-nav-vertical__item |
| Modifier | True |
| Selector | .slds-nav-vertical__action |
|---|---|
| Summary | Actionable element inside of vertical navigation list item |
| Restrict | .slds-nav-vertical a, .slds-nav-vertical button, .slds-nav-vertical label |
| Selector | .slds-nav-vertical__action_overflow |
|---|---|
| Summary | Actionable element that toggles visibility of overflown list items |
| Restrict | .slds-nav-vertical__action |
| Selector | .slds-nav-vertical__action-text |
|---|---|
| Summary | Text inside of actionable element that toggles visibility of overflown list items |
| Restrict | .slds-nav-vertical__action_overflow span |
| Selector | .slds-nav-vertical_radio-faux |
|---|---|
| Summary | Used for styling the radio button |
| Restrict | .slds-nav-vertical__action span |
| Selector | .slds-nav-vertical__item [type="radio"] |
|---|---|
| Summary | Version of vertical nav that uses radio buttons |
| Restrict | .slds-nav-vertical |
| Variant | True |