Tabs

Usage

• Tabs appear horizontally. They are never stacked and do not wrap to a second line.
• Tabs have a minimum and maximum width. Labels truncate when necessary.
• Labels are left aligned.
• Display contextual icons to the left of the label. The right side of a tab is reserved for closing and dragging mechanisms.
• While there is not a specific limit to the number of tabs that can occur in a given set, try to group tabbed content into a reasonable number of tabs to make it easy for users to find content and navigate between options.
• On Desktop, tabular navigation (left/right scrolling) occurs on the right side of the tab menu and any “adding tab” mechanism occurs on the right.
• On Mobile, there is no navigation. The entire tabular set is horizontally scrollable.

Variations

Default with Icon

Default Double Line

Developer Notes

Markup structure

A tabbed content container is created by adding a class of spark-tabs to an element. Inside of this element are two main wrapping elements: spark-tabs__nav and spark-tabs__panels.

The spark-tabs__nav navigation element contains the elements that are used to navigate the tabbed content. There are a number of elements within this container and their roles are defined below:

• The spark-tabs__scroll wrapper element is the first element inside the navigation container and it is used to allow the horizontal scrolling of the tab buttons in cases where long tab names or limited available screen do not allow for the full display of individual tab labels.
• The spark-tabs__list element is a list of the available tabs, and each individual list item has a class of spark-tabs__tab. Within each list item is an anchor tag, <a>, which contains the labels of each tab and is the interactive control that triggers tab switching. The current tab is highlighted visually by the active class that is found on the spark-tabs__tab list item. There should only be one active tab at a time. By default, the first tab in the list and its associated panel are the active items. If you’d like a specific panel to be active, the active class should be manually set to its controlling link’s list item.
• The spark-tabs__btns wrapper element is also placed within the navigation element and it contains buttons used to navigate left and right through the tab list in the event scrolling is required to view the available tabs.

The panels element, spark-tabs__panels, contains a list of tab panels that correspond to tabs defined in the tab list above. By default, clicking on an element in the tab list with the role="tab" attribute will open an item with a corresponding index in the tab panels with the role="tabpanel" attribute. More details about these ARIA roles can be found in the Accessibility tab.

Configurable settings

The following options may be passed when using new Spark.Tabs(el, {}); or $(el).sparkTabs({});:

For all available methods and full API, refer to the component code on Bitbucket.

Default Single Line

<div class="spark-tabs">
  <nav class="spark-tabs__nav" role="menubar">
    <div class="spark-tabs__scroll">
      <ul class="spark-tabs__list" role="tablist">
        <li class="spark-tabs__tab active" role="presentation">
          <a href="#" role="tab" aria-controls="tab1" aria-selected="true">This Title Really Long And Needs To Be Truncated</a>
        </li>
        <li class="spark-tabs__tab" role="presentation">
          <i class="spark-icon-airplane"></i>
          <a href="#" role="tab" aria-controls="tab2">Also long and has an icon.</a>
        </li>
        <li class="spark-tabs__tab" role="presentation">
          <a href="#" role="tab" aria-controls="tab3">Normal</a>
        </li>
        <li class="spark-tabs__tab" role="presentation">
          <a href="#" role="tab" aria-controls="tab4">Normal 4</a>
        </li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div id="tab1" role="tabpanel" class="spark-tabs__panel" aria-hidden="false">Tab 1 content</div>
    <div id="tab2" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 2 content</div>
    <div id="tab3" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 3 content</div>
    <div id="tab4" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 4 content</div>
  </div>
</div>

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

// Optional jQuery version
$('.spark-tabs').sparkTabs();

Default with Icon

<div class="spark-tabs">
  <nav class="spark-tabs__nav" role="menubar">
    <div class="spark-tabs__scroll">
      <ul class="spark-tabs__list" role="tablist">
        <li class="spark-tabs__tab" role="presentation">
          <a href="#" role="tab" aria-controls="tab1">This Title Really Long And Needs To Be Truncated</a>
        </li>
        <li class="spark-tabs__tab active" role="presentation">
          <i class="spark-icon-airplane"></i>
          <a href="#" role="tab" aria-controls="tab2" aria-selected="true">Also long and has an icon.</a>
        </li>
        <li class="spark-tabs__tab" role="presentation">
          <a href="#" role="tab" aria-controls="tab3">Normal</a>
        </li>
        <li class="spark-tabs__tab" role="presentation">
          <a href="#" role="tab" aria-controls="tab4">Normal 4</a>
        </li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div id="tab1" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 1 content</div>
    <div id="tab2" role="tabpanel" class="spark-tabs__panel" aria-hidden="false">Tab 2 content</div>
    <div id="tab3" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 3 content</div>
    <div id="tab4" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 4 content</div>
  </div>
</div>

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

// Optional jQuery version
$('.spark-tabs').sparkTabs();

Default Double Line

<div class="spark-tabs">
  <nav class="spark-tabs__nav" role="menubar">
    <div class="spark-tabs__scroll">
      <ul class="spark-tabs__list" role="tablist">
        <li class="spark-tabs__tab" role="presentation"><a href="#" role="tab" aria-controls="tab1">A Normal Title</a></li>
        <li class="spark-tabs__tab" role="presentation"><a href="#" role="tab" aria-controls="tab2">This Title Really Long And Needs To Be Truncated</a></li>
        <li class="spark-tabs__tab active" role="presentation"><a href="#" role="tab" aria-controls="tab3" aria-selected="true">Tab Title 3<br><small>With a subhead</small></a></li>
        <li class="spark-tabs__tab" role="presentation"><a href="#" role="tab" aria-controls="tab4">Tab Title 4</a></li>
        <li class="spark-tabs__tab" role="presentation"><a href="#" role="tab" aria-controls="tab5">Tab Title 5</a></li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div id="tab1" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 1 content</div>
    <div id="tab2" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 2 content</div>
    <div id="tab3" role="tabpanel" class="spark-tabs__panel" aria-hidden="false">Tab 3 content</div>
    <div id="tab4" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 4 content</div>
    <div id="tab5" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 5 content</div>
  </div>
</div>

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

// Optional jQuery version
$('.spark-tabs').sparkTabs();

Accessibility Notes

Because tabs are not native HTML elements, it is important to use appropriate markup to ensure that the tabs are accessible to screen-readers and other assistive devices. This is generally accomplished by using ARIA attributes for semantic enhancements. Javascript is then used to dynamically manage various attributes that are used to inform assistive devices of the current state of the tabs. The ARIA roles and attributes required to make the tabs component fully accessible are described below.

Tab navigation controls

The spark-tabs__nav navigation element requires a role of menubar, which is typically used to denote menus that are visible and presented horizontally.

<nav class="spark-tabs__nav" role="menubar">

The spark-tabs__list element contains the actual list of tabs used for navigation and requires a role of tablist to indicate to screen-readers and assistive devices that its child elements are selectable tabs. The spark-tabs__tab list items have a role of presentation as they do not have any functional or interactive importance but are semantically required to build a valid HTML list. This is explained further below.

<ul class="spark-tabs__list" role="tablist">
  ...
  <li class="spark-tabs__tab" role="presentation">...</li>
  ...
</ul>

As mentioned in the Developer Notes, the current tab will have an active class applied to the list item, and there can only be one active tab at a time. If you intend to have a specific tab other than the first as the visible tab on page load, you will need to set the active class on that tab’s list item.

<ul class="spark-tabs__list" role="tablist">
  ...
  <li class="spark-tabs__tab active" role="presentation">...</li>
  ...
</ul>

Within each spark-tabs__tab list item is an anchor tag, <a>, that contains the label of the tab. This element has an href attribute defined to make the element keyboard accessible. If an href is not provided, make sure a tabindex="0" is provided as a fallback to make sure it is keyboard-focusable. A role of tab is then set to to this element to indicate that it is the mechanism for selecting tab content. The reason this element has role="tab" instead of its parent <li> is that the tab needs to be focusable directly, whereas the <li> element is not a focusable element. The aria-controls attribute is provided to indicate which tab panel the specific anchor controls. The value of this attribute is the id of the associated tab panel.

<ul class="spark-tabs__list" role="tablist">
  ...
  <li class="spark-tabs__tab" role="presentation">
    <a href="#" role="tab" aria-controls="tab1">Tab Title</a>
  </li>
  ...
</ul>

If a specific tab is currently being displayed, an aria-selected attribute is required to identify it as the currently selected tab. This is associated with the active class discussed previously and they should be used in conjunction. If manually setting the initial current tab, both the active class and aria-selected attribute should be set. When a user interacts with the tabs, the aforementioned class and ARIA attribute will be dynamically managed by Javascript to remove the values from a tab if that tab is no longer the current tab and added to the current tab.

<ul class="spark-tabs__list" role="tablist">
  ...
  <li class="spark-tabs__tab active" role="presentation">
    <a href="#" role="tab" aria-controls="tab1" aria-selected="true">Tab Title</a>
  </li>
  ...
</ul>

Included in the Tabs component are navigational aids that allow users to scroll the Tab list to the left or right in situations where all Tabs cannot fit in the viewport. These controls are housed in a spark-tabs__btns container and consist of two Icon Buttons. Because there is no text provided within these buttons, they require aria-label attributes to indicate their purpose to screen-readers and assistive devices.

...
<div class="spark-tabs__btns">
  <button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
  <button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
</div>
...

Tab content panels

The spark-tabs__panel containers hold the tab contents and should be uniquely identified with an id attribute. The value of this id is then used as the value of the aria-controls attribute for the tab that controls the specific tab panel. A role of tabpanel identifies the container as an individual tab panel to screen-readers and assistive devices. If a tab is initially hidden, an aria-hidden attribute should be provided and set to true, otherwise it should be set to false if you intend for this tab to be the initial visible tab. Javascript will be used to manage the aria-hidden state when a user interacts with different tabs, but this attribute and value should always be initially set to the desired value.

<div class="spark-tabs__panels">
  <div id="tab1" role="tabpanel" class="spark-tabs__panel" aria-hidden="false">Tab 1 content</div>
  <div id="tab2" role="tabpanel" class="spark-tabs__panel" aria-hidden="true">Tab 2 content</div>
  ...
</div>