Scoped Tabs
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
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 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">
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#
<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#
<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 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.
With Overflowing Items#
<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#
<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#
<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
- 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 |
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
andslds-tabs_large
to modify thefont-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