Tabs

Tabs

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

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

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


About Tabs

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

JavaScript Needs

The active tab has two markup requirements:

  • The .slds-active class should be placed on the li with .slds-tabs_{variant}__item.
  • The corresponding .slds-tabs_{variant}__content container receives .slds-show.
  • 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"

Expected markup:

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

Expected keyboard interactions:

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

Overview of CSS Classes

Selector.slds-tabs_default
Summary

Initializes a default tablist

Restrictdiv
VariantTrue
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
ModifierTrue
Selector.slds-has-focus
Summary

Focus state for a tab item

Restrict.slds-tabs_default__item
ModifierTrue
Selector.slds-has-notification
Summary

Creates styles for a Tab Item when its tab has new activity in

Restrict.slds-tabs_default__item
Selector.slds-indicator_unread
Summary

Unread notification icon

Restrict.slds-has-notification span
Selector.slds-tabs_default__link
Summary

Styles each actionable element inside each tab item

Restrict.slds-tabs_default__item a
Selector.slds-tabs_default__content
Summary

Styles each tab content wrapper

Restrict.slds-tabs_default div
Selector.slds-tabs_default
Summary

Sub tabs

Restrictdiv
VariantTrue