Tabs

Tabs allow users to explore multiple views of a related data set.

Default Example

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content


When to Use

  • Use tabs to organize content or data sets that do not need to be viewed in a single display.

When Not to Use

  • Do not use tabs when content or data appearing in separate tabs may need to be compared.
  • Do not use tabs when content or data is better viewed in a single display.

Variations

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

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content


Default Double Line

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content


Developer Notes

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 navigation element should have role="menubar" as an ARIA attribute. To properly allow for scrolling of the list of tabs, inside the navigation element should be an element with a class of .spark-tabs__scroll. Inside of the scroll container there should be a <ul> with a class of .spark-tabs__list and the role="tablist" ARIA attribute. The items of the list should have a class of .spark-tabs__tab and the role="tab" ARIA attribute. A tab with the class of .active will be highlighted. There should only be one active tab at a time.

Inside the navigation element there should be an element with a class of .spark-tabs__btns that contains buttons used to navigate left and right through the tab list.

The panels element 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 role="tab" will open an item with a corresponding index in the tab panels with role="tabpanel".

The tabs implementation relies on JavaScript to function fully. You must instantiate the tabs using either the jQuery plugin (var tabs = $('#tabs).sparkTabs();) or the native JavaScript implementation (var tabs = new Spark.Tabs(document.querySelector('#tabs));).

It is important to store a reference to the created instance if you want to programmatically set the active tab. This can be done by calling tabs.setActive(index);, tabs.setActive(element); or tabs.setActive(#id);.

Default Single Line

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
<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="tab"><a href="#">This Title Really Long And Needs To Be Truncated</a></li>
        <li class="spark-tabs__tab" role="tab"><i class="spark-icon-airplane"></i><a href="#">Also long and has an icon.</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Normal</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Normal 4</a></li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div role="tabpanel" class="spark-tabs__panel">Tab 1 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 2 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 3 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 4 content</div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

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

Default with Icon

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
<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="tab"><a href="#">This Title Really Long And Needs To Be Truncated</a></li>
        <li class="spark-tabs__tab active" role="tab"><i class="spark-icon-airplane"></i><a href="#">Also long and has an icon.</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Normal</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Normal 4</a></li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div role="tabpanel" class="spark-tabs__panel">Tab 1 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 2 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 3 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 4 content</div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

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

Default Double Line

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content
<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="tab"><a href="#">A Normal Title</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">This Title Really Long And Needs To Be Truncated</a></li>
        <li class="spark-tabs__tab active" role="tab"><a href="#">Tab Title 3<br><small>With a subhead</small></a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Tab Title 4</a></li>
        <li class="spark-tabs__tab" role="tab"><a href="#">Tab Title 5</a></li>
      </ul>
    </div>
    <div class="spark-tabs__btns">
      <button class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
      <button class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
    </div>
  </nav>
  <div class="spark-tabs__panels">
    <div role="tabpanel" class="spark-tabs__panel">Tab 1 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 2 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 3 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 4 content</div>
    <div role="tabpanel" class="spark-tabs__panel">Tab 5 content</div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-tabs');
var tabsInstance = new Spark.Tabs(el);

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