Component Blueprints

Scoped Tabs

A tab keeps related content in a single container that is shown and hidden through navigation.
Item One Content
Item Two Content
Item Three Content

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

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"

Markup#

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

Keyboard Interactions#

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

Base#

Item One Content
Item Two Content
Item Three Content
<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="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a>

Selecting Tabs#

Item One Content
Item Two Content
Item Three Content
<div class="slds-tabs_scoped">
  <ul class="slds-tabs_scoped__nav" role="tablist">
    <li class="slds-tabs_scoped__item" title="Item One" role="presentation">
      <a class="slds-tabs_scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a>

JavaScript Needs#

The active tab has two markup requirements:

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

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

With Overflowing Items#

Item One Content
Item Two Content
Item Three Content
<div class="demo-only" style="height:12rem">
  <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">

Sizes#

Medium#

Item One Content
Item Two Content
Item Three Content
<div class="slds-tabs_scoped slds-tabs_medium">
  <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="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a>

Large#

Item One Content
Item Two Content
Item Three Content
<div class="slds-tabs_scoped slds-tabs_large">
  <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="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a>

Styling Hooks Overview#

See the Tabs Styling Hooks table.

Overview of CSS Classes#

Selector.slds-tabs_scoped
Summary

Initializes scoped tabs

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-tabs_scoped__nav
Summary

Creates the container for the default tabs

Restrict.slds-tabs_scoped ul
Selector.slds-tabs_scoped__item
Summary

Styles each list item as a single tab

Restrict.slds-tabs_scoped ul li
Selector.slds-tabs_scoped__link
Summary

Styles each actionable element inside each tab item

Restrict.slds-tabs_scoped__item a, .slds-tabs_scoped__item button
Selector.slds-tabs_scoped__overflow-button
Summary

List item containing the overflow button menu

Restrict.slds-tabs_scoped__item
Selector.slds-is-active
Summary

Active state for a tab item

Restrict.slds-tabs_scoped__item
ModifierTrue
Selector.slds-tabs_scoped__content
Summary

Styles each tab content wrapper

Restrict.slds-tabs_scoped div
Selector.slds-tabs_medium
Summary

Medium sized tabs

Restrict.slds-tabs_scoped
ModifierTrue
Selector.slds-tabs_large
Summary

Large sized tabs

Restrict.slds-tabs_scoped
ModifierTrue

Scoped Tabs Release Notes

2.14.0

Removed

  • Removed variant specific styling hooks for scoped tabs.

2.13.3

Changed

  • Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. --sds-c-tabs-scoped-color-text => --sds-c-tabs-scoped-text-color.

2.13.0

Added

  • Enabled styling hooks for scoped tab. See scoped tab's styling hooks overview table for a full listing of the currently available hooks.

2.7.0

Added

  • Added slds-tabs_medium and slds-tabs_large to modify the font-size and spacing of the tab items
  • Added slds-tabs_scoped__overflow-button to tabs with overflow so the Button Menu component can be slotted inside the tab item

Changed

  • Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting
  • Changed the color of a tab item when a tab is active
  • Changed HTML on Tabs with Overflow example so a Button Menu component is the trigger for the overflow menu