information

You are currently viewing a sandbox preview version of Spring ’21 | Go back to Spring ’21

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

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

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#

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).
If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a span with the class slds-vertical-tabs__left-icon. If you require an icon or badge to the right of the label, you can wrap the element in a span with the class slds-vertical-tabs__right-icon.

Accessibility#

Vertical Tabbed UIs have three parts with specific ARIA roles, markup and interactions:

ARIA Roles#

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"

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">

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

Base#

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">

Examples#

With Icons#

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Opportunities" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">

With Badges#

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Opportunities" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">

Modifiers#

Interactions#

Item Focus#

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-has-focus" title="Tab 1" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 1">Tab 1</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
    <li class="slds-vertical-tabs__nav-item" title="Tab 2" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 2">Tab 2</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
    <li class="slds-vertical-tabs__nav-item" title="Tab 3 has a really long label and can wrap or truncate" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 3 has a really long label and can wrap or truncate">Tab 3 has a really long label and can wrap or truncate</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
  </ul>
  <div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel" aria-labelledby="slds-vertical-tabs-0__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
  <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel" aria-labelledby="slds-vertical-tabs-1__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
  <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel" aria-labelledby="slds-vertical-tabs-2__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
</div>

Item Active#

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

Tab Title

Content for Tab 1

Lorem ipsum dolor...

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 1">Tab 1</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
    <li class="slds-vertical-tabs__nav-item" title="Tab 2" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 2">Tab 2</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
    <li class="slds-vertical-tabs__nav-item" title="Tab 3 has a really long label and can wrap or truncate" role="presentation">
      <a class="slds-vertical-tabs__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
        <span class="slds-vertical-tabs__left-icon"></span>
        <span class="slds-truncate" title="Tab 3 has a really long label and can wrap or truncate">Tab 3 has a really long label and can wrap or truncate</span>
        <span class="slds-vertical-tabs__right-icon"></span>
      </a>
    </li>
  </ul>
  <div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel" aria-labelledby="slds-vertical-tabs-0__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
  <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel" aria-labelledby="slds-vertical-tabs-1__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
  <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel" aria-labelledby="slds-vertical-tabs-2__nav">
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">Tab Title</h3>
      <p>Content for Tab 1</p>
      <p>Lorem ipsum dolor...</p>
      <p>Lorem ipsum dolor...</p>
    </div>
  </div>
</div>

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-vertical-tabs`
Summary	Renders a vertical tablist.
Support	dev-ready
Restrict	`div, section`
Variant	True

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-vertical-tabs__left-icon`
Summary	Left icon inside of vertical tabs nav item
Restrict	`.slds-vertical-tabs__nav-item span`

Selector	`.slds-vertical-tabs__right-icon`
Summary	Right icon inside of vertical tabs nav item
Restrict	`.slds-vertical-tabs__nav-item span`

Selector	`.slds-is-active`
Summary	Active state for a tab navigation item
Restrict	`.slds-vertical-tabs__nav-item`
Modifier	True

Selector	`.slds-has-focus`
Summary	Focus state for a tab navigation item
Restrict	`.slds-vertical-tabs__nav-item`
Modifier	True

Selector	`.slds-vertical-tabs__content`
Summary	Tab Content Container
Restrict	`.slds-vertical-tabs div`

Vertical Tabs Release Notes

2.8.0

Added

Added examples of icons in vertical tabs
Added examples of badges in vertical tabs
Added new classes to support icons and badges, slds-vertical-tabs__left-icon and slds-vertical-tabs__right-icon

Sections

Tab Title

Tab Title

Tab Title

About Vertical Tabs#

Implementation#

Accessibility#

ARIA Roles#

Markup#

Keyboard Interactions#

Base#

Tab Title

Tab Title

Tab Title

Examples#

With Icons#

Tab Title

Tab Title

Tab Title

With Badges#

Tab Title

Tab Title

Tab Title

Modifiers#

Interactions#

Item Focus#

Tab Title

Tab Title

Tab Title

Item Active#

Tab Title

Tab Title

Tab Title

Overview of CSS Classes#

What are these categories?

Vertical Tabs Release Notes

2.8.0

Added