Vertical Tabs

Vertical Tabs

A component that shows groups of content, separated into tabs, and controlled by the tabs

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

The default Vertical Tabs component renders a list of tabs and their related content. The tab list is not truncated by default, but truncation can be added with a modifier class on the link elements.


About Vertical Tabs

The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time.

This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space.

Implementation Notes and Requirements

The Tab Component has the following markup requirements:

  • The .slds-is-active modifier class is required on the .slds-vertical-tabs__nav-item element that is active (its content is being shown).
  • The .slds-has-focus modifier class is required on the .slds-vertical-tabs__nav-item element that has focus.
  • The .slds-show modifier class is required on the .slds-vertical-tabs__content element that is being shown (their tab label is selected).
  • The .slds-hide modifier class is required on all .slds-vertical-tabs__content elements that are not being shown (their tab label is not selected).
  • The .slds-truncate modifier class is optional on .slds-vertical-tabs__link elements if single-line truncation is desired for the tab labels.

Accessibility

Vertical Tabbed UIs have three parts with specific ARIA role requirements:

  • The tab list, which should have role="tablist"
  • The tabs in that list, which should each be an <a role="tab"> anchor wrapped in a <li role="presentation"> li
  • The tab panels, which display each tab's content and should each have role="tabpanel"

Expected markup:

  • Selected tab’s anchor has aria-selected="true", all other tabs’ anchors have aria-selected="false"
  • Selected tab’s anchor has tabindex="0", all other tabs have tabindex="-1"
  • Each tab’s anchor has an aria-controls attribute whose value is the id of the associated <div role="tabpanel">
  • Each tab panel has an aria-labelledby attribute whose value is the id of its associated <a role="tab">

Expected keyboard interactions:

  • Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab
  • Tab key, when focus is before the tab list, moves focus to the selected tab
  • Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements
  • Shift+Tab keys, when focus is on first element in a tab panel, move focus to the selected tab

Overview of CSS Classes

Selector.slds-vertical-tabs
Summary

Renders a vertical tablist.

Restrictdiv, section
VariantTrue
Selector.slds-vertical-tabs__nav
Summary

Tab navigation container element

Restrict.slds-vertical-tabs > ul
Selector.slds-vertical-tabs__nav-item
Summary

Tab navigation item

Restrict.slds-vertical-tabs__nav li
Selector.slds-vertical-tabs__link
Summary

Tab Navigation Link

Restrict.slds-vertical-tabs__nav-item a
Selector.slds-truncate
Summary
Restrict.slds-vertical-tabs__link
ModifierTrue
Selector.slds-is-active
Summary

Active state for a tab navigation item

Restrict.slds-vertical-tabs__nav-item
ModifierTrue
Selector.slds-has-focus
Summary

Focus state for a tab navigation item

Restrict.slds-vertical-tabs__nav-item
ModifierTrue
Selector.slds-vertical-tabs__content
Summary

Tab Content Container

Restrict.slds-vertical-tabs div