Scoped Tabs
- HTML/CSS:Dev Ready
- Layout:Desktop Only
A tab keeps related content in a single container that is shown and hidden through navigation.
Base
Preview
About Base
A scoped tabset style has a closed container with a defined border. Initialize
a scoped tab set by applying the .slds-tab_scoped
class to the containing
<div>
around the tab list and tab panels. The <ul>
element also requires
the class .slds-tab_scoped__nav
to prevent styles from bleeding into nested tabs.
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.
JavaScript Needs
The active tab has two markup requirements:
- The
.slds-active
class should be placed on theli
with.slds-tabs_{variant}__item
. - The corresponding
.slds-tabs_{variant}__content
container receives.slds-show
.
Inactive .slds-tabs_{variant}__content
containers receive .slds-hide
.
When the user clicks a different tab, move the .slds-active
class and
toggle the .slds-hide
/.slds-show
classes.
Accessibility
Tabbed UIs have three parts with specific ARIA role requirements:
- The tab list, which should have
role="tablist"
- The tabs in that list, which should each be an
<a role="tab">
anchor wrapped in a<li role="presentation">
list item - The tab panels, which display each tab’s content and should each have
role="tabpanel"
Expected markup:
- Selected tab’s anchor has
aria-selected="true"
, all other tabs’ anchors havearia-selected="false"
- Selected tab’s anchor has
tabindex="0"
, all other tabs havetabindex="-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
- 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_scoped |
---|---|
Summary | Initializes scoped tabs |
Support | dev-ready |
Restrict | div |
Variant | True |
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 |
Modifier | True |
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 |
Modifier | True |
Selector | .slds-tabs_large |
---|---|
Summary | Large sized tabs |
Restrict | .slds-tabs_scoped |
Modifier | True |