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

Item One Content

Item Two Content

Item Three Content

About Tabs#

The default tab set style encapsulates everything that is underneath it without enclosing it visually. 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.

Implementation#

Markup#

The following markup is crucial for Accessibility

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 a 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, moves focus back to the selected tab

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.
In order to achieve the focus state styling, apply .slds-has-focus to the parent li.

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"

Base#

Item One Content

Item Two Content

Item Three Content

<div class="slds-tabs_default">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-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>

With Overflow#

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.

Item One Content

Item Two Content

Item Three Content

Item Four Content

Item Five Content

<div class="demo-only" style="height:12rem">
  <div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
      <li class="slds-tabs_default__item slds-is-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>
      <li class="slds-tabs_default__item" title="Item Four" role="presentation">
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Item Four</a>
      </li>
      <li class="slds-tabs_default__item" title="Item Five" role="presentation">
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-5" id="tab-default-5__item">Item Five</a>
      </li>
      <li class="slds-tabs_default__item slds-tabs_default__overflow-button" title="More Tabs" role="presentation">
        <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
          <button class="slds-button" aria-haspopup="true">More
            <svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
          <div class="slds-dropdown slds-dropdown_right">
            <ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Accounts">Accounts</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Approvals">Approvals</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Lead">Leads</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
      <h2>Item One Content</h2>
    </div>
    <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
      <h2>Item Two Content</h2>
    </div>
    <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
      <h2>Item Three Content</h2>
    </div>
    <div id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
      <h2>Item Four Content</h2>
    </div>
    <div id="tab-default-5" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-5__item">
      <h2>Item Five Content</h2>
    </div>
  </div>
</div>

Implementation Guidelines
The `slds-dropdown__list` element requires a `slds-dropdown_length-with-icon-10` class, where 10 is the maximum number of items that will be visible before having to scroll.

With Icon#

Icons can be used with tabs to help users differentiate among them.

Item One Content

Item Two Content

Item Three Content

Item Four Content

Item Five Content

<div class="demo-only" style="height:12rem">
  <div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
      <li class="slds-tabs_default__item slds-is-active" title="Opportunities" 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">
          <span class="slds-tabs__left-icon">
            <span class="slds-icon_container slds-icon-standard-opportunity" title="Opportunities">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
              </svg>
            </span>
          </span>Opportunities</a>
      </li>
      <li class="slds-tabs_default__item" title="Cases" 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">
          <span class="slds-tabs__left-icon">
            <span class="slds-icon_container slds-icon-standard-case" title="Cases">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
              </svg>
            </span>
          </span>Cases</a>
      </li>
      <li class="slds-tabs_default__item" title="Products" 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">
          <span class="slds-tabs__left-icon">
            <span class="slds-icon_container slds-icon-standard-product" title="Products">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#product"></use>
              </svg>
            </span>
          </span>Products</a>
      </li>
      <li class="slds-tabs_default__item" title="Price Books" role="presentation">
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">
          <span class="slds-tabs__left-icon">
            <span class="slds-icon_container slds-icon-standard-pricebook" title="Price Books">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#pricebook"></use>
              </svg>
            </span>
          </span>Price Books</a>
      </li>
      <li class="slds-tabs_default__item" title="Contacts" role="presentation">
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-5" id="tab-default-5__item">
          <span class="slds-tabs__left-icon">
            <span class="slds-icon_container slds-icon-standard-contact" title="Contacts">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
              </svg>
            </span>
          </span>Contacts</a>
      </li>
      <li class="slds-tabs_default__item slds-tabs_default__overflow-button" title="More Tabs" role="presentation">
        <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
          <button class="slds-button" aria-haspopup="true">More
            <svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
          <div class="slds-dropdown slds-dropdown_right">
            <ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Accounts">
                    <span class="slds-media slds-media_center">
                      <span class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
                          <svg class="slds-icon slds-icon_small" aria-hidden="true">
                            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                          </svg>
                        </span>
                      </span>
                      <span class="slds-media__body">Accounts</span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Approvals">
                    <span class="slds-media slds-media_center">
                      <span class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-approval" title="Description of icon when needed">
                          <svg class="slds-icon slds-icon_small" aria-hidden="true">
                            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#approval"></use>
                          </svg>
                        </span>
                      </span>
                      <span class="slds-media__body">Approvals</span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Lead">
                    <span class="slds-media slds-media_center">
                      <span class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-lead" title="Description of icon when needed">
                          <svg class="slds-icon slds-icon_small" aria-hidden="true">
                            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
                          </svg>
                        </span>
                      </span>
                      <span class="slds-media__body">Leads</span>
                    </span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
      <h2>Item One Content</h2>
    </div>
    <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
      <h2>Item Two Content</h2>
    </div>
    <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
      <h2>Item Three Content</h2>
    </div>
    <div id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
      <h2>Item Four Content</h2>
    </div>
    <div id="tab-default-5" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-5__item">
      <h2>Item Five Content</h2>
    </div>
  </div>
</div>

With Error#

An icon can be used to communicate when a tab contains a validation error that needs attention.

Item One Content

Item Two Content - Has Error

Item Three Content

Item Four Content

<div class="demo-only" style="height:12rem">
  <div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
      <li class="slds-tabs_default__item slds-is-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
          <span class="slds-tabs__right-icon">
            <span class="slds-icon_container slds-icon-utility-error" title="This item has an error">
              <svg class="slds-icon slds-icon_x-small slds-icon-text-error" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
              </svg>
              <span class="slds-assistive-text">This item has an error</span>
            </span>
          </span>
        </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>
      <li class="slds-tabs_default__item" title="Item Four" role="presentation">
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Item Four</a>
      </li>
    </ul>
    <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
      <h2>Item One Content</h2>
    </div>
    <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
      <h2>Item Two Content - Has Error</h2>
    </div>
    <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
      <h2>Item Three Content</h2>
    </div>
    <div id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
      <h2>Item Four Content</h2>
    </div>
  </div>
</div>

With Nested Scoped Tabs#

If nesting tabs within tabs, the second set should be rendered as Scoped Tabs to help differentiate between tab sets.

Item One Content

Item Two Content

Item Three Content

Item Two Content

Item Three Content

<div class="slds-tabs_default">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-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">
    <div class="slds-tabs_scoped">
      <ul class="slds-tabs_scoped__nav" role="tablist">
        <li class="slds-tabs_scoped__item slds-is-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>
  </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>

Size Modifiers#

Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class slds-tabs_medium or slds-tabs_large to the slds-tabs_default element.

Medium#

Item One Content

Item Two Content

Item Three Content

<div class="slds-tabs_default slds-tabs_medium">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-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>

Large#

Item One Content

Item Two Content

Item Three Content

<div class="slds-tabs_default slds-tabs_large">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-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>

Subtabs#

Subtabs 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.

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Expected Behavior#

The first tab within the Subtab 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 Subtab 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.
Subtabs can optionally include a tab menu for additional controls.

With Focus#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active slds-has-focus" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

With Borders#

To add borders on either side of the subtab, add the classes slds-border_right and slds-border_left, as needed, to the <li> with class slds-sub-tabs__item.

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active slds-border_right slds-border_left" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-border_right" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

With Tab Actions#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="Actions for 00071938">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
          <span class="slds-assistive-text">Actions for 00071938</span>
        </button>
      </div>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" aria-haspopup="true" tabindex="-1" title="Actions for Chat - Customer">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
          <span class="slds-assistive-text">Actions for Chat - Customer</span>
        </button>
      </div>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Status Options#

Unsaved Tab#

Unsaved tabs receive a blue asterisk on the tab.

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text"></span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active slds-is-unsaved" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container">
          <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
        </span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Additional Tag for Accessibility
In order to inform screen readers of the unsaved state, an <abbr> tag is used to render the asterisk. The title attribute and aria-label should read "Tab Not Saved".

<abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>

Communicating Status to Screen Readers#

The following examples of sub tab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change.

You should use a single hidden ARIA live region for the entire sub tabs block, the contents of which gets updated each time a sub tab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occured in. The markup would look something like:

<div class="slds-assistive-text" aria-live="polite">...</div>

Upon clearing the status on a given tab, you should clear the message from the live region.

Unread Tab#

Unread tabs receive a red dot on the tab.

New activity in Tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-notification" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container">
          <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
        </span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Accessibility
In order to inform screen readers of new activity in a tab, 2 things should occur.

1. The `title` attribute and `aria-label` on the element that displays the red dot should read "New Activity". This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".

2. The hidden live region as described above, should have its content updated to "New Activity in Tab: [Tab Name Here]" to alert the user of new activity in that particular sub tab.

<span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>

<div class="slds-assistive-text" aria-live="polite">New activity in Tab: Chat - Customer</div>

Unread and Unsaved Tab#

Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements.

New activity in Tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-notification slds-is-unsaved" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container">
          <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
          <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
        </span>
        <span class="slds-icon_container" title="Live Chat">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
          </svg>
          <span class="slds-assistive-text">Live Chat</span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Accessibility
Don't forget to update the hidden live region with which sub tab has new activity

Warning Tab#

When you wish to draw attention to a particular sub tab because a warning about that tab has occured, you can use the slds-has-warning class to change the background color and introduce a short pulsing animation to draw attention from the user.

The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone.

In this example we show that something inside the sub tab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action.

Warning: SLA agreement in 30 seconds in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-warning" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA 0.30">
        <span class="slds-indicator-container"></span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-warning slds-current-color" title="warning">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
            <span class="slds-assistive-text">warning</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA 0.30">SLA 0.30</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA 0.30">
          <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 SLA 0.30</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Accessibility
Update the hidden live region with a message that informs the user of the status level, the warning and the offending sub tab [level]: [message] in tab: [tab_name]

<div class="slds-assistive-text" aria-live="polite">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</div>

Unsaved Warning Tab#

Warning: SLA agreement in 30 seconds in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-warning slds-is-unsaved" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA 0.30">
        <span class="slds-indicator-container">
          <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-warning slds-current-color" title="warning">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
            <span class="slds-assistive-text">warning</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA 0.30">SLA 0.30</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA 0.30">
          <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 SLA 0.30</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread Warning Tab#

Warning: SLA agreement in 30 seconds in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-notification slds-has-warning" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA 0.30">
        <span class="slds-indicator-container">
          <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-warning slds-current-color" title="warning">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
            <span class="slds-assistive-text">warning</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA 0.30">SLA 0.30</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA 0.30">
          <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 SLA 0.30</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Error Tab#

When you wish to draw attention to a particular sub tab because an error or violation has occured in that tab, you can use the slds-has-error class to change the background color and introduce a short pulsing animation to draw attention from the user.

The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone.

In this example we show that something inside the sub tab has broken an SLA agreement, and we wish to draw the users attention to it to take action.

Violation: SLA agreement in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-error" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA Violation">
        <span class="slds-indicator-container"></span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-error" title="error">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
            </svg>
            <span class="slds-assistive-text">error</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA Violation">SLA Violation</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA Violation">
          <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 SLA Violation</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Accessibility
Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending sub tab [level]: [message] in tab: [tab_name]

<div class="slds-assistive-text" aria-live="polite">Violation: SLA agreement in tab: Chat - Customer</div>

Unsaved Error Tab#

Violation: SLA agreement in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-error slds-is-unsaved" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA Violation">
        <span class="slds-indicator-container">
          <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-error" title="error">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
            </svg>
            <span class="slds-assistive-text">error</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA Violation">SLA Violation</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA Violation">
          <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 SLA Violation</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread Error Tab#

Violation: SLA agreement in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-error slds-has-notification" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="SLA Violation">
        <span class="slds-indicator-container">
          <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-error" title="error">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
            </svg>
            <span class="slds-assistive-text">error</span>
          </span>
        </span>
        <span class="slds-truncate" title="SLA Violation">SLA Violation</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close SLA Violation">
          <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 SLA Violation</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Success Tab#

When you wish to draw attention to a particular sub tab because a warning or violation has been cleared in the sub tab, you can use the slds-has-success class to change the background color and introduce a short pulsing animation to draw attention from the user.

The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone.

Success: SLA agreement warning cleared in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-success" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container"></span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-success" title="success">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
            </svg>
            <span class="slds-assistive-text">success</span>
          </span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Accessibility
Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the sub tab it was cleared from [level]: [message] in tab: [tab_name]

<div class="slds-assistive-text" aria-live="polite">Success: SLA agreement warning cleared in tab: Chat - Customer</div>

Unsaved Success Tab#

Success: SLA agreement warning cleared in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-success slds-is-unsaved" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container">
          <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-success" title="success">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
            </svg>
            <span class="slds-assistive-text">success</span>
          </span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread Success Tab#

Success: SLA agreement warning cleared in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-active" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="true" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="0" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center slds-has-notification slds-has-success" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="Chat - Customer">
        <span class="slds-indicator-container">
          <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
        </span>
        <span class="slds-m-horizontal_xx-small">
          <span class="slds-icon_container slds-icon-utility-success" title="success">
            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
            </svg>
            <span class="slds-assistive-text">success</span>
          </span>
        </span>
        <span class="slds-truncate" title="Chat - Customer">Chat - Customer</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close Chat - Customer">
          <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 Chat - Customer</span>
        </button>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

With Overflow Tab#

Overflowing subtabs are contained in a More dropdown.

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container"></span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container"></span>
                  <span class="slds-icon_container" title="Live Chat">
                    <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
                    </svg>
                    <span class="slds-assistive-text">Live Chat</span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Overflow Tab Open#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container"></span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container"></span>
                  <span class="slds-icon_container" title="Live Chat">
                    <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
                    </svg>
                    <span class="slds-assistive-text">Live Chat</span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread Overflow Tab#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-notification">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
                  </span>
                  <span class="slds-icon_container" title="Live Chat">
                    <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
                    </svg>
                    <span class="slds-assistive-text">Live Chat</span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unsaved Overflow Tab#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-is-unsaved">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <abbr class="slds-indicator_unsaved" title="Tab(s) within menu not saved" aria-label="Tab(s) within menu not saved">*</abbr>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
                  </span>
                  <span class="slds-icon_container" title="Live Chat">
                    <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
                    </svg>
                    <span class="slds-assistive-text">Live Chat</span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread and Unsaved Overflow Tab#

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-notification slds-is-unsaved">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <abbr class="slds-indicator_unsaved" title="Tab(s) within menu not saved" aria-label="Tab(s) within menu not saved">*</abbr>
            <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
                    <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
                  </span>
                  <span class="slds-icon_container" title="Live Chat">
                    <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#live_chat"></use>
                    </svg>
                    <span class="slds-assistive-text">Live Chat</span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Success Overflow Tab#

Success: SLA agreement warning cleared in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-success">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container"></span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-success" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container"></span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-success" title="success">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
                      </svg>
                      <span class="slds-assistive-text">success</span>
                    </span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread and Unsaved Success Overflow Tab#

Success: SLA agreement warning cleared in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-notification slds-has-success slds-is-unsaved">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <abbr class="slds-indicator_unsaved" title="Tab(s) within menu not saved" aria-label="Tab(s) within menu not saved">*</abbr>
            <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-success" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
                    <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
                  </span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-success" title="success">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
                      </svg>
                      <span class="slds-assistive-text">success</span>
                    </span>
                  </span>
                  <span>Chat - Customer</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Warning Overflow Tab#

Warning: SLA agreement in 30 seconds in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-warning">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container"></span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-warning" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container"></span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-warning slds-current-color" title="warning">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
                      </svg>
                      <span class="slds-assistive-text">warning</span>
                    </span>
                  </span>
                  <span>SLA 0.30</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread and Unsaved Warning Overflow Tab#

Warning: SLA agreement in 30 seconds in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-notification slds-has-warning slds-is-unsaved">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <abbr class="slds-indicator_unsaved" title="Tab(s) within menu not saved" aria-label="Tab(s) within menu not saved">*</abbr>
            <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-warning" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
                    <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
                  </span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-warning slds-current-color" title="warning">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
                      </svg>
                      <span class="slds-assistive-text">warning</span>
                    </span>
                  </span>
                  <span>SLA 0.30</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Error Overflow Tab#

Violation: SLA agreement in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-error">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container"></span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-error" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container"></span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-error" title="error">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
                      </svg>
                      <span class="slds-assistive-text">error</span>
                    </span>
                  </span>
                  <span>SLA Violation</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Unread and Unsaved Error Overflow Tab#

Violation: SLA agreement in tab: Chat - Customer

Item One Content

Item Two Content

<div class="slds-tabs_default slds-sub-tabs">
  <span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-01" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071938">00071938</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071938">
          <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 00071938</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center" role="presentation">
      <a aria-controls="subtab-tabpanel-02" aria-selected="false" class="slds-tabs_default__link slds-p-horizontal_xx-small" href="javascript:void(0);" id="subtab-tabitem-02" role="tab" tabindex="-1" title="00071939">
        <span class="slds-indicator-container"></span>
        <span 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>
        </span>
        <span class="slds-truncate" title="00071939">00071939</span>
      </a>
      <div class="slds-col_bump-left slds-p-left_none slds-p-right_none">
        <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small" tabindex="-1" title="Close 00071939">
          <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 00071939</span>
        </button>
      </div>
    </li>
    <li class="slds-tabs_default__item slds-sub-tabs__item slds-tabs_default__overflow-button slds-has-error slds-has-notification slds-is-unsaved">
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        <button class="slds-button" aria-haspopup="true" title="More Tab Items">
          <span class="slds-indicator-container">
            <abbr class="slds-indicator_unsaved" title="Tab(s) within menu not saved" aria-label="Tab(s) within menu not saved">*</abbr>
            <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
          </span>
          <span class="slds-truncate" title="More Tabs">More
            <span class="slds-assistive-text">Tabs</span>
          </span>
          <svg class="slds-button__icon slds-button__icon_small slds-button__icon_right" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
        </button>
        <div class="slds-dropdown slds-dropdown_right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item slds-has-notification" role="presentation">
              <a class="slds-has-error" href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Chat - Customer">
                  <span class="slds-indicator-container">
                    <abbr class="slds-indicator_unsaved" title="Tab Not Saved" aria-label="Tab Not Saved">*</abbr>
                    <span aria-label="New Activity" class="slds-indicator_unread" title="New Activity"></span>
                  </span>
                  <span class="slds-m-horizontal_xx-small">
                    <span class="slds-icon_container slds-icon-utility-error" title="error">
                      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
                      </svg>
                      <span class="slds-assistive-text">error</span>
                    </span>
                  </span>
                  <span>SLA Violation</span>
                </span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate" title="Overflow Tab Item">
                  <span class="slds-indicator-container"></span>
                  <span 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>
                  </span>
                  <span>Overflow Tab Item</span>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div aria-labelledby="subtab-tabitem-01" class="slds-tabs_default__content slds-show" id="subtab-tabpanel-01" role="tabpanel">Item One Content</div>
  <div aria-labelledby="subtab-tabitem-02" class="slds-tabs_default__content slds-hide" id="subtab-tabpanel-02" role="tabpanel">Item Two Content</div>
</div>

Vertical#

To use vertical tabs, check out the Vertical Tabs component

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

As a Card#

To style tabs as a card, add the class slds-tabs_card to the <div> with the class slds-tabs_default. See the following example for guidance on styling cards inside the tab panel content.

This is a card inside an .slds-tabs_card to show how styling is removed when cards are nested inside.

This is a card inside an .slds-tabs_card to illustrate how.slds-card_boundary adds a rounded border when desired.

Item Two Content

Item Three Content

<div class="slds-tabs_default slds-tabs_card">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-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">
    <article class="slds-card">
      <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-contact" title="contact">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
              </svg>
              <span class="slds-assistive-text">contact</span>
            </span>
          </div>
          <div class="slds-media__body">
            <h2 class="slds-card__header-title">
              <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Card Header">
                <span>Card Header</span>
              </a>
            </h2>
          </div>
          <div class="slds-no-flex">
            <button class="slds-button slds-button_neutral">New</button>
          </div>
        </header>
      </div>
      <div class="slds-card__body slds-card__body_inner">This is a card inside an
        <code class="doc">.slds-tabs_card</code> to show how styling is removed when cards are nested inside.</div>
      <footer class="slds-card__footer">
        <a class="slds-card__footer-action" href="javascript:void(0);">View All
          <span class="slds-assistive-text">Contacts</span>
        </a>
      </footer>
    </article>
    <article class="slds-card">
      <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-contact" title="contact">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
              </svg>
              <span class="slds-assistive-text">contact</span>
            </span>
          </div>
          <div class="slds-media__body">
            <h2 class="slds-card__header-title">
              <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Card Header">
                <span>Card Header</span>
              </a>
            </h2>
          </div>
          <div class="slds-no-flex">
            <button class="slds-button slds-button_neutral">New</button>
          </div>
        </header>
      </div>
      <div class="slds-card__body slds-card__body_inner">This is a card inside an
        <code class="doc">.slds-tabs_card</code> to show how styling is removed when cards are nested inside.</div>
      <footer class="slds-card__footer">
        <a class="slds-card__footer-action" href="javascript:void(0);">View All
          <span class="slds-assistive-text">Contacts</span>
        </a>
      </footer>
    </article>
    <article class="slds-card slds-card_boundary">
      <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-contact" title="contact">
              <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
              </svg>
              <span class="slds-assistive-text">contact</span>
            </span>
          </div>
          <div class="slds-media__body">
            <h2 class="slds-card__header-title">
              <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Card Header">
                <span>Card Header</span>
              </a>
            </h2>
          </div>
          <div class="slds-no-flex">
            <button class="slds-button slds-button_neutral">New</button>
          </div>
        </header>
      </div>
      <div class="slds-card__body slds-card__body_inner">This is a card inside an
        <code class="doc">.slds-tabs_card</code> to illustrate how
        <code class="doc">.slds-card_boundary</code> adds a rounded border when desired.</div>
      <footer class="slds-card__footer">
        <a class="slds-card__footer-action" href="javascript:void(0);">View All
          <span class="slds-assistive-text">Contacts</span>
        </a>
      </footer>
    </article>
  </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>

On Mobile#

For mobile, tabs become stacked and act as buttons that drill in to see the tab's content.

Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left.

Focus Management
When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.

<div class="slds-tabs-mobile__container">
  <ul class="slds-tabs-mobile">
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item One">Item One</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Two">Item Two</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Three">Item Three</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
  </ul>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 1 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 1 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 1 Panel">Item 1 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 2 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 2 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 2 Panel">Item 2 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 3 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 3 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 3 Panel">Item 3 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
</div>

Accessibility#

Visibility

The panels should have aria-hidden=true when they are not visible to ensure keyboard and screen reader users cannot access the content.
The tabs should have aria-hidden=true when a panel is open to ensure keyboard and screen reader users cannot access the buttons.

Focus Management

When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.

Assistive Text

The title and assistive text for the panel's back button text should read "Collapse ${heading text}” so it stays contextual to the tab that was clicked on.

Panel Open#

When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.

A panel body accepts any layout or component

<div class="slds-tabs-mobile__container">
  <ul class="slds-tabs-mobile">
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item One">Item One</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Two">Item Two</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Three">Item Three</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
  </ul>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 1 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 1 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 1 Panel">Item 1 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 2 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 2 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 2 Panel">Item 2 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 3 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 3 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 3 Panel">Item 3 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
</div>

Adjacent Tab Sets#

When there are two or more immediately adjacent tab sets on mobile, use the slds-tabs_mobile__group class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists.

<div class="slds-tabs-mobile__group">
  <div class="slds-tabs-mobile__container">
    <ul class="slds-tabs-mobile">
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item One">Item One</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item Two">Item Two</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item Three">Item Three</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
    </ul>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 1 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 1 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 1 Panel">Item 1 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 2 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 2 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 2 Panel">Item 2 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 3 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 3 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 3 Panel">Item 3 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
  </div>
  <div class="slds-tabs-mobile__container">
    <ul class="slds-tabs-mobile">
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item One">Item One</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item Two">Item Two</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
      <li class="slds-tabs-mobile__item">
        <button class="slds-button slds-button_full-width">
          <span class="slds-truncate" title="Item Three">Item Three</span>
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
        </button>
      </li>
    </ul>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 1 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 1 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 1 Panel">Item 1 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 2 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 2 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 2 Panel">Item 2 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
    <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
      <div class="slds-panel__header slds-panel__header_align-center">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 3 Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
          </svg>
          <span class="slds-assistive-text">Collapse Item 3 Panel</span>
        </button>
        <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 3 Panel">Item 3 Panel</h2>
      </div>
      <div class="slds-panel__body">A panel body accepts any layout or component</div>
    </div>
  </div>
</div>

Nested Tab Sets#

Any content can be here

<div class="slds-tabs-mobile__container">
  <ul class="slds-tabs-mobile slds-hidden">
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item One">Item One</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Two">Item Two</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
    <li class="slds-tabs-mobile__item">
      <button class="slds-button slds-button_full-width">
        <span class="slds-truncate" title="Item Three">Item Three</span>
        <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
        </svg>
      </button>
    </li>
  </ul>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-is-open" aria-hidden="false">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 1 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 1 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 1 Panel">Item 1 Panel</h2>
    </div>
    <div class="slds-panel__body">
      <ul class="slds-tabs-mobile">
        <li class="slds-tabs-mobile__item">
          <button class="slds-button slds-button_full-width">
            <span class="slds-truncate" title="Nested Item One">Nested Item One</span>
            <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
            </svg>
          </button>
        </li>
        <li class="slds-tabs-mobile__item">
          <button class="slds-button slds-button_full-width">
            <span class="slds-truncate" title="Nested Item Two">Nested Item Two</span>
            <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
            </svg>
          </button>
        </li>
        <li class="slds-tabs-mobile__item">
          <button class="slds-button slds-button_full-width">
            <span class="slds-truncate" title="Nested Item Three">Nested Item Three</span>
            <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
            </svg>
          </button>
        </li>
      </ul>
      <div> Any content can be here </div>
      <ul class="slds-tabs-mobile">
        <li class="slds-tabs-mobile__item">
          <button class="slds-button slds-button_full-width">
            <span class="slds-truncate" title="Nested Item Four">Nested Item Four</span>
            <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
            </svg>
          </button>
        </li>
        <li class="slds-tabs-mobile__item">
          <button class="slds-button slds-button_full-width">
            <span class="slds-truncate" title="Nested Item Five">Nested Item Five</span>
            <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
            </svg>
          </button>
        </li>
      </ul>
    </div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 2 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 2 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 2 Panel">Item 2 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Item 3 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Item 3 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Item 3 Panel">Item 3 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Nested Item 1 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Nested Item 1 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Nested Item 1 Panel">Nested Item 1 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Nested Item 2 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Nested Item 2 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Nested Item 2 Panel">Nested Item 2 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Nested Item 3 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Nested Item 3 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Nested Item 3 Panel">Nested Item 3 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Nested Item 4 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Nested Item 4 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Nested Item 4 Panel">Nested Item 4 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</div>
  </div>
  <div class="slds-panel slds-panel_docked slds-panel_docked-left slds-panel_animated slds-hidden" aria-hidden="true">
    <div class="slds-panel__header slds-panel__header_align-center">
      <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Nested Item 5 Panel">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#back"></use>
        </svg>
        <span class="slds-assistive-text">Collapse Nested Item 5 Panel</span>
      </button>
      <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Nested Item 5 Panel">Nested Item 5 Panel</h2>
    </div>
    <div class="slds-panel__body">A panel body accepts any layout or component</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-tabs_default`
Summary	Initializes a default tablist
Support	dev-ready
Restrict	`div`
Variant	True

Selector	`.slds-tabs_default__nav`
Summary	Creates the container for the default tabs
Restrict	`.slds-tabs_default ul`

Selector	`.slds-tabs_default__item`
Summary	Styles each list item as a single tab
Restrict	`.slds-tabs_default ul li`

Selector	`.slds-tabs__item_overflow`
Summary	A tab item that has an overflow menu
Restrict	`.slds-tabs_default__item`

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

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

Selector	`.slds-has-notification`
Summary	Creates styles for a Tab Item when its tab has new activity in
Restrict	`.slds-tabs_default__item, .slds-dropdown__item`

Selector	`.slds-indicator_unread`
Summary	Unread notification icon
Restrict	`.slds-has-notification span`

Selector	`.slds-is-unsaved`
Summary	Creates styles for a Tab Item when its in an unsaved or dirty state
Restrict	`.slds-tabs_default__item`

Selector	`.slds-tabs_default__link`
Summary	Styles each actionable element inside each tab item
Restrict	`.slds-tabs_default__item a, .slds-tabs_default__item button`

Selector	`.slds-tabs_default__overflow-button`
Summary	List item containing the overflow button menu
Restrict	`.slds-tabs_default__item`

Selector	`.slds-tabs__left-icon`
Summary	true
Restrict	`.slds-tabs_default__item span`

Selector	`.slds-tabs__right-icon`
Summary	true
Restrict	`.slds-tabs_default__item span`

Selector	`.slds-tabs_default__content`
Summary	Styles each tab content wrapper
Restrict	`.slds-tabs_default div`

Selector	`.slds-tabs_medium`
Summary	Medium sized tabs
Restrict	`.slds-tabs_default`
Modifier	True

Selector	`.slds-tabs_large`
Summary	Large sized tabs
Restrict	`.slds-tabs_default`
Modifier	True

Selector	`.slds-sub-tabs`
Summary	Subtabs
Support	dev-ready
Restrict	`.slds-tabs_default`
Variant	True

Selector	`.slds-sub-tabs__item`
Summary	Subtab item
Restrict	`.slds-sub-tabs li`

Selector	`.slds-indicator-container`
Summary	Used to reserve spacing for tab indicators
Restrict	`.slds-context-bar__item span, .slds-sub-tabs__item span`

Selector	`.slds-has-success`
Summary	Success notification on a sub tab
Restrict	`.slds-sub-tabs__item`

Selector	`.slds-has-error`
Summary	Error notification on a sub tab
Restrict	`.slds-sub-tabs__item`

Selector	`.slds-has-warning`
Summary	Warning notification on a sub tab
Restrict	`.slds-sub-tabs__item`

Selector	`.slds-tabs-mobile__container`
Summary	Container to hold mobile tabs and their panels
Support	dev-ready
Restrict	`div`
Variant	True

Selector	`.slds-panel_animated`
Summary	Modifier that changes the display of a panel to hide out of view and animate in when opened
Restrict	`.slds-tabs-mobile__container .slds-panel`
Modifier	True

Selector	`.slds-tabs-mobile`
Summary	Styles the list of tabs for the mobile tab set
Restrict	`.slds-tabs-mobile__container ul`

Selector	`.slds-tabs-mobile__item`
Summary	Styles each list item as a single drill-in tab
Restrict	`.slds-tabs-mobile li`

Tabs Release Notes

2.10.0

Changed

For touch devices:
- Changed the text color of .slds-tabs-mobile__item to Gray Color 12
- Removed the active color from the button nested within .slds-tabs-mobile__item so the text color does not change on press (background color still changes on press)

2.8.3

Changed

Removed animation when invoking an active tab

2.8.0

Added

Added examples of icon use in default tabs
Sub Tabs can now show 3 different statuses to alert users - error, success, and warning

Removed

Removed slds-text-title_caps from scrolling tab items.

2.7.0

Added

Added slds-tabs_medium and slds-tabs_large to modify the font-size and spacing of the tab items
Added animation when activating a tab item
Added slds-tabs_default__overflow-button to tabs with overflow so the Button Menu component can be slotted inside the tab item
Extended the documentation for mobile tabs to include panels
- When drilling into a mobile tab, a panel slides in displaying that tab's content
- Check out the Tabs On Mobile section for more details
Animations and transitions for :hover and slds-is-active states.

Changed

Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting
Removed title caps from tab items
Removed letter spacing from tab items
Increased height of bar when a tab is active
Changed HTML on Tabs with Overflow example so a Button Menu component is the trigger for the overflow menu

Fixed

Updated slds-tabs-mobile to have a white background by default, instead of a transparent background.
Improved the color contrast of the text of a sub tab when it is in focus
HTML validation error on sub tab indicators, swapped a div for a span

Sections

About Tabs#

Implementation#

Markup#

Keyboard Interactions#

JavaScript Needs#

Accessibility#

Base#

With Overflow#

Item One Content

Item Two Content

Item Three Content

Item Four Content

Item Five Content

With Icon#

Item One Content

Item Two Content

Item Three Content

Item Four Content

Item Five Content

With Error#

Item One Content

Item Two Content - Has Error

Item Three Content

Item Four Content

With Nested Scoped Tabs#

Size Modifiers#

Medium#

Large#

Subtabs#

Expected Behavior#

With Focus#

With Borders#

With Tab Actions#

Status Options#

Unsaved Tab#

Communicating Status to Screen Readers#

Unread Tab#

Unread and Unsaved Tab#

Warning Tab#

Unsaved Warning Tab#

Unread Warning Tab#

Error Tab#

Unsaved Error Tab#

Unread Error Tab#

Success Tab#

Unsaved Success Tab#

Unread Success Tab#

With Overflow Tab#

Overflow Tab Open#

Unread Overflow Tab#

Unsaved Overflow Tab#

Unread and Unsaved Overflow Tab#

Success Overflow Tab#

Unread and Unsaved Success Overflow Tab#

Warning Overflow Tab#

Unread and Unsaved Warning Overflow Tab#

Error Overflow Tab#

Unread and Unsaved Error Overflow Tab#

Vertical#

Tab Title

Tab Title

Tab Title

As a Card#

On Mobile#

Accessibility#

Panel Open#

Item 1 Panel

Adjacent Tab Sets#

Nested Tab Sets#

Item 1 Panel

Overview of CSS Classes

What are these categories?

Tabs Release Notes

2.10.0

Changed

2.8.3

Changed

2.8.0

Added