Vertical Tabs

vertical-tabs

.slds-vertical-tabs — A component that shows groups of content, separated into tabs, and controlled by the tabs

base

.slds-vertical-tabs — Renders a vertical tablist.

base › With icons

base › With badges

base › Item Focus

.slds-vertical-tabs__nav

.slds-vertical-tabs__nav — Tab navigation container element

.slds-vertical-tabs__nav-item

.slds-vertical-tabs__nav-item — Tab navigation item

.slds-vertical-tabs__link

.slds-vertical-tabs__link — Tab Navigation Link

.slds-vertical-tabs__left-icon

.slds-vertical-tabs__left-icon — Left icon inside of vertical tabs nav item

.slds-vertical-tabs__right-icon

.slds-vertical-tabs__right-icon — Right icon inside of vertical tabs nav item

item-active

.slds-is-active — Active state for a tab navigation item

item-focus

.slds-has-focus — Focus state for a tab navigation item

.slds-vertical-tabs__content

.slds-vertical-tabs__content — Tab Content Container