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

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

Implementation Guidelines
The slds-dropdown__list element requires aslds-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">

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

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

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

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

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="#" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">

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 subtabs 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="#" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="0" title="00071938">

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

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 subtab 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 subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred 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">

Accessibility
In order to inform screen readers of new activity in a tab, 2 things should occur.
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".
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 subtab.

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

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

Warning Tab#

When you wish to draw attention to a particular subtab because a warning about that tab has occurred, 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 subtab 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">

Accessibility
Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab [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">

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

Error Tab#

When you wish to draw attention to a particular subtab because an error or violation has occurred 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 subtab 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">

Accessibility
Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab [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">

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

Success Tab#

When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, 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">

Accessibility
Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab 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">

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

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="#" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">

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="#" id="subtab-tabitem-01" role="tab" tabindex="-1" title="00071938">

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

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

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

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

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

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

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

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

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 $&123;heading text&125;” 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">

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

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

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

Category	Styling Hook Name	Value Type(s)	Fallback Value
Color	`--sds-c-tabs-list-color-border`	Color	#dddbda
	`--sds-c-tabs-item-color-border-active`	Color	#1b96ff
	`--sds-c-tabs-item-color-border-hover`	Color	#0176d3
Sizing	`--sds-c-tabs-list-sizing-border`	Dimension	2px) + 1px
Sizing	`--sds-c-tabs-item-sizing-height`	Dimension	2.5rem
Spacing	`--sds-c-tabs-item-spacing-block-start`	Dimension	var(--sds-c-tabs-item-spacing-block, 0)
	`--sds-c-tabs-item-spacing-inline-end`	Dimension	var(--sds-c-tabs-item-spacing-inline, 0.75rem)
	`--sds-c-tabs-item-spacing-block-end`	Dimension	var(--sds-c-tabs-item-spacing-block, 0)
	`--sds-c-tabs-item-spacing-inline-start`	Dimension	var(--sds-c-tabs-item-spacing-inline, 0.75rem)
	`--sds-c-tabs-panel-spacing-block-start`	Dimension	var(--sds-c-tabs-panel-spacing-block, 0.75rem)
	`--sds-c-tabs-panel-spacing-inline-end`	Dimension	var(--sds-c-tabs-panel-spacing-inline, 0)
	`--sds-c-tabs-panel-spacing-block-end`	Dimension	var(--sds-c-tabs-panel-spacing-block, 0.75rem)
	`--sds-c-tabs-panel-spacing-inline-start`	Dimension	var(--sds-c-tabs-panel-spacing-inline, 0)
Text	`--sds-c-tabs-item-line-height`	Number	2.5rem
	`--sds-c-tabs-item-text-color`		#3e3e3c
	`--sds-c-tabs-item-text-color-active`		#080707

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 subtab
Restrict	`.slds-sub-tabs__item`

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

Selector	`.slds-has-warning`
Summary	Warning notification on a subtab
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`

Selector	`.slds-tabs-mobile__group`
Summary	Wrapper for adjacent mobile tab sets
Support	dev-ready
Restrict	`div`
Variant	True

Tabs Release Notes

2.15.0

Added

Added additional styling hooks. See tab's styling hooks overview table for a full listing of the currently available hooks.

Changed

Adjusted color of unsaved tab indicator asterisk to comply with accessibility color contrast rules for active tabs and tabs with notification.
Removed white background-color from .slds-tabs_default to expose surface color of the tabs parent container.
The back icon present in tabs on mobile has been replaced by chevronleft. This is an inherited change from panels and it makes the icon consistent between the drilled-in states.

2.13.3

Changed

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

2.13.0

Added

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

2.11.0

Changed

For touch devices:
- Removed the focus styling from the button nested within .slds-tabs-mobile__item so the text color does not change on press for mobile (background color still changes on press)

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
Subtabs 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 subtab when it is in focus
HTML validation error on subtab 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

Implementation Guidelines

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#

Additional Tag for Accessibility

Communicating Status to Screen Readers#

Unread Tab#

Accessibility

Unread and Unsaved Tab#

Accessibility

Warning Tab#

Accessibility

Unsaved Warning Tab#

Unread Warning Tab#

Error Tab#

Accessibility

Unsaved Error Tab#

Unread Error Tab#

Success Tab#

Accessibility

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#

Focus Management

Accessibility#

Panel Open#

Item 1 Panel

Adjacent Tab Sets#

Nested Tab Sets#

Item 1 Panel

Styling Hooks Overview#