vertical-tabs

About Vertical Tabs

The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time.

This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space.

Implementation

The Tab Component has the following markup requirements:

• The .slds-is-active modifier class is required on the .slds-vertical-tabs__nav-item element that is active (its content is being shown).
• The .slds-has-focus modifier class is required on the .slds-vertical-tabs__nav-item element that has focus.
• The .slds-show modifier class is required on the .slds-vertical-tabs__content element that is being shown (their tab label is selected).
• The .slds-hide modifier class is required on all .slds-vertical-tabs__content elements that are not being shown (their tab label is not selected).
• If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a span with the class slds-vertical-tabs__left-icon. If you require an icon or badge to the right of the label, you can wrap the element in a span with the class slds-vertical-tabs__right-icon.

Accessibility

Vertical Tabbed UIs have three parts with specific

ARIA Roles

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

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">

Examples

With Icons

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Opportunities" role="presentation">

With Badges

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Opportunities" role="presentation">

Modifiers

Interactions

Item Focus

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-has-focus" title="Tab 1" role="presentation">

Item Active

<div class="slds-vertical-tabs">
  <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
    <li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">