Components

Tabs

A tab keeps related content in a single container that is shown and hidden through navigation.

DefaultDefault › Item One SelectedDefault › Item Two SelectedDefault › Overflowing itemsDefault › With Nested Scoped TabsDefaultdev ready

Preview

Code

<div class="slds-tabs--default">
  <ul class="slds-tabs--default__nav" role="tablist">
    <li class="slds-tabs--default__item slds-active" title="Item One" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a></li>
    <li class="slds-tabs--default__item" title="Item Two" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a></li>
    <li class="slds-tabs--default__item" title="Item Three" role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a></li>
  </ul>
  <div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
  <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
  <div id="tab-default-3" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
</div>

The default tab set style encapsulates everything that is underneath it without enclosing it visually. Initialize a default tab set by applying the .slds-tab--default class to the containing <div> around the tab list and tab panels. The <ul> element also requires the class .slds-tab--default__nav to prevent styles from bleeding into nested tabs.

The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation. Initialize a default tab set and in the last tab item of the set, apply the additional classes slds-dropdown-trigger and .slds-tabs__item--overflow. Include an <a> element to contain the tab item label like the other tab items. After the <a> element, the .slds-dropdown segment of a search overflow menu component is used. The slds-dropdown__list element also then requires a slds-dropdown--length-X class, where X is the number of items to show in it.

Sub TabsSub Tabs › DefaultSub Tabs › Tab - FocusSub Tabs › Unsaved TabSub Tabs › With BordersSub Tabs › Tab - Action OverflowSub Tabsdev ready

Preview

Code

<div class="slds-tabs--default">
  <ul class="slds-tabs--default__nav" role="tablist">
    <li class="slds-tabs--default__item slds-grid slds-grid--vertical-align-center slds-active" role="presentation">
      <a href="javascript:void(0);" class="slds-tabs--default__link slds-p-horizontal--xx-small" role="tab" title="Tab Item 1" aria-selected="true" tabindex="0" id="subtab-tabitem-01" aria-controls="subtab-tabpanel-01">
        <div class="slds-icon_container" title="Case">
          <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
          </svg>
          <span class="slds-assistive-text">Case</span>
        </div>
        <span class="slds-truncate" title="Tab Item 1">Tab Item 1</span>
      </a>
      <div class="slds-col--bump-left slds-p-left--none slds-p-right--none">
        <button class="slds-button slds-button--icon-container slds-button--icon-x-small" tabindex="0" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close Tab Item 1</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs--default__item slds-grid slds-grid--vertical-align-center" role="presentation">
      <a href="javascript:void(0);" class="slds-tabs--default__link slds-p-horizontal--xx-small" role="tab" title="Tab Item 2" aria-selected="false" tabindex="-1" id="subtab-tabitem-02" aria-controls="subtab-tabpanel-02">
        <div class="slds-icon_container" title="Case">
          <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
          </svg>
          <span class="slds-assistive-text">Case</span>
        </div>
        <span class="slds-truncate" title="Tab Item 2">Tab Item 2</span>
      </a>
      <div class="slds-col--bump-left slds-p-left--none slds-p-right--none">
        <button class="slds-button slds-button--icon-container slds-button--icon-x-small" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close Tab Item 2</span>
        </button>
      </div>
    </li>
  </ul>
  <div class="slds-tabs--default__content slds-show" id="subtab-tabpanel-01" role="tabpanel" aria-labelledby="subtab-item-01">Item One Content</div>
  <div class="slds-tabs--default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel" aria-labelledby="subtab-item-02">Item Two Content</div>
</div>

Sub Tabs are used to provide an additional level of navigation below the Global Navigation Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item.


The first tab within the Sub Tab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed.

When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Sub Tab Bar.When opening the first additional sub-navigation tab a new tab bar is inserted containing both the default tab and the new sub-navigation tab.

All sub tabs are closed when the parent navigation item is closed.

Sub Tabs can optionally include a tab menu for additional controls.

ScopedScoped › Item One SelectedScoped › Item Two SelectedScopeddev ready

Preview

Code

<div class="slds-tabs--scoped">
  <ul class="slds-tabs--scoped__nav" role="tablist">
    <li class="slds-tabs--scoped__item slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a></li>
    <li class="slds-tabs--scoped__item" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item">Item Two</a></li>
    <li class="slds-tabs--scoped__item" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item">Item Three</a></li>
  </ul>
  <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">Item One Content</div>
  <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">Item Two Content</div>
  <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">Item Three Content</div>
</div>

A scoped tabset style has a closed container with a defined border. Initialize a scoped tab set by applying the .slds-tab--scoped class to the containing <div> around the tab list and tab panels. The <ul> element also requires the class .slds-tab--scoped__nav to prevent styles from bleeding into nested tabs.

Component Overview

Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets.

JavaScript Needs

The active tab has two markup requirements:

  • The .slds-active class should be placed on the li with .slds-tabs--{variant}__item.
  • The corresponding .slds-tabs--{variant}__content container receives .slds-show.

Inactive .slds-tabs--{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Accessibility

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"> list item
  • 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

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different tabset looks.
Class NameUsage
.slds-tabs--default
Applied to:

<div>

Outcome:

Initializes default tabset

Required:

Required

Comments:

--

.slds-tabs--default__nav
Applied to:

<ul>

Outcome:

Creates the container for the default tabs

Required:

Required

Comments:

--

.slds-tabs--default__item
Applied to:

<li>

Outcome:

Styles each list item as a single tab

Required:

Required

Comments:

--

.slds-tabs--default__link
Applied to:

<a>

Outcome:

Styles each <a> element in the <li>

Required:

Required

Comments:

--

.slds-tabs--default__content
Applied to:

<div>

Outcome:

Styles each tab content wrapper

Required:

Required

Comments:

--

.slds-tabs--scoped
Applied to:

<div>

Outcome:

Initializes scoped tabset

Required:

Required

Comments:

--

.slds-tabs--scoped__nav
Applied to:

<ul>

Outcome:

Creates the container for the tabs

Required:

Required

Comments:

--

.slds-tabs--scoped__item
Applied to:

<li>

Outcome:

Styles each list item as a single tab

Required:

Required

Comments:

--

.slds-tabs--scoped__link
Applied to:

<a>

Outcome:

Styles each <a> element in the <li>

Required:

Required

Comments:

--

.slds-tabs--scoped__content
Applied to:

<div>

Outcome:

Styles each tab content wrapper

Required:

Required

Comments:

--

.slds-tabs__item--overflow
Applied to:

.slds-tabs__item

Outcome:

Styles an overflow tab item

Required:

No, optional element or modifier

Comments:

This is used on a tab containing an overflow dropdown menu

.slds-dropdown-trigger
Applied to:

.slds-tabs__item--overflow

Outcome:

Initializes tab item as menu

Required:

Required

Comments:

--

.slds-active
Applied to:

.slds-tabs__item

Outcome:

Applies the active state to a tab list item

Required:

Required

Comments:

Required on the <li> element that is associated with the active tab panel

.slds-show
Applied to:

.slds-tabs__content

Outcome:

Shows the tab panel

Required:

Required

Comments:

--

.slds-hide
Applied to:

.slds-tabs__content

Outcome:

Hide the tab panel

Required:

Required

Comments:

--