Vertical Navigation

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
Restrictnav, fieldset
VariantTrue
Selector.slds-nav-vertical_compact
Summary

Modifer to reduce spacing between navigation items

Restrict.slds-nav-vertical
ModifierTrue
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
ModifierTrue
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
ModifierTrue
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
VariantTrue