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.

BaseRequires ui:scrollerWrapper

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