Tabbed Navigation

The Tabbed Navigation component is a set of clickable buttons that each display content related to a specific subject. Use a Tabbed Navigation component when you want to organize pieces of related content. When a Tab button is clicked it will hide the previously shown tab content and show its own.

Restrictions

  • Tabbed Navigation needs to have at least two tabs.
  • There should not be more than seven tabs in any single Tabbed Navigation.
  • Tab label content should not exceed a reasonable length.

Tabs

Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.

Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh.

Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.

<div class="sprk-c-Tabs" role="tablist" aria-orientation="horizontal" data-sprk-navigation="tabs">
  <div class="sprk-c-Tabs__buttons">
    <button class="sprk-c-Tabs__button sprk-c-Tabs__button--active" role="tab" aria-controls="target-1" aria-selected="true" id="tab-1" type="button">
      Tab 1
    </button>

    <button class="sprk-c-Tabs__button" role="tab" aria-controls="target-2" aria-selected="false" id="tab-2" type="button">
      Tab 2
    </button>

    <button class="sprk-c-Tabs__button" role="tab" aria-controls="target-3" aria-selected="false" id="tab-3" type="button">
      Tab 3
    </button>
  </div>

  <div class="sprk-c-Tabs__content" id="target-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Tab 1 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh. Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.
    </p>
  </div>
  <div class="sprk-c-Tabs__content sprk-u-Display--none" id="target-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
    <p>Tab 2 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, vel consequat ante consectetur in. Ut interdum dictum est at ornare. Nam nec dapibus nibh.</p>
  </div>
  <div class="sprk-c-Tabs__content sprk-u-Display--none" id="target-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3">
    <p>Tab 3 Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis rhoncus ipsum. Nulla euismod nisi est, Integer venenatis ex eu mi euismod, non ultricies lacus venenatis.
    </p>
  </div>
</div>