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.

Base

Preview

No content has been added for this component.

No content has been added for this component.

Overview of CSS Classes

Selector.slds-nav-vertical
Summary
Restrictnav
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
Selector.slds-nav-vertical__item
Summary

List of the vertical navigation

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