Vertical Navigation
- HTML/CSS:Dev Ready
- Layout:Responsive
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-nav-vertical |
|---|---|
| Summary | |
| Support | dev-ready |
| 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 |
| Support | dev-ready |
| Restrict | .slds-nav-vertical |
| Variant | True |