Tabs

Overview

The tabs component is a handy way of breaking content up into sections, making it easier for a user to understand. This is a clever way of having a large amount of content on your page, without making it overly long.

Examples

Horizontal variation

Example
External Link

one

Check me out! I'm a super cool Tab panel with text content!

<!-- Tabs navigation -->
<div class="tabs" data-myob-tabs id="example-tabs" role="tablist">
  <div class="tabs__menu">
    <ul class="tabs__list">
      <li class="tabs__title is-active" role="presentation">
        <a href="#panel1" aria-selected="true" role="tab" aria-controls="panel1" id="panel1-label">Lorem ipsum</a>
      </li>
      <li class="tabs__title" role="presentation">
        <a href="#panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label">Dolor sit amet</a>
      </li>
      <li class="tabs__title" role="presentation">
        <a href="#panel3" role="tab" aria-controls="panel3" aria-selected="false" id="panel3-label">Consectetur adipiscing elit</a>
      </li>
      <li class="tabs__title" role="presentation">
        <a href="#panel4" role="tab" aria-controls="panel4" aria-selected="false" id="panel4-label">Integer non enim</a>
      </li>
      <li class="tabs__title" role="presentation">
        <a href="#panel5" role="tab" aria-controls="panel5" aria-selected="false" id="panel5-label">Eu ligula ultricies suscipit</a>
      </li>
    </ul>
  </div>
  <!-- Tabs content -->
  <div class="tabs__content" data-tabs-content="example-tabs">
    <div class="tabs__panel is-active" id="panel1" role="tabpanel" aria-hidden="false" aria-labelledby="panel1-label">
      <p>one</p>
      <p>Check me out! I'm a super cool Tab panel with text content!</p>
    </div>
    <div class="tabs__panel" id="panel2" role="tabpanel" aria-hidden="true" aria-labelledby="panel2-label">
      <p>two</p>
      <img class="thumbnail" src="http://placehold.it/200x200">
    </div>
    <div class="tabs__panel" id="panel3" role="tabpanel" aria-hidden="true" aria-labelledby="panel3-label">
      <p>three</p>
      <p>Check me out! I'm a super cool Tab panel with text content!</p>
    </div>
    <div class="tabs__panel" id="panel4" role="tabpanel" aria-hidden="true" aria-labelledby="panel4-label">
      <p>four</p>
      <img class="thumbnail" src="http://placehold.it/150x300">
    </div>
    <div class="tabs__panel" id="panel5" role="tabpanel" aria-hidden="true" aria-labelledby="panel5-label">
      <p>five</p>
      <p>Check me out! I'm a super cool Tab panel with text content!</p>
    </div>
  </div>
</div>

Usage guidelines

Dos Donts
do iconDo use clear labels that explain the content contained within.
do-not iconDon't place large amounts of content inside the Tabs area. Consider splitting out into a seperate page.
do iconDo set a default Tab that presents the most important information first.
do-not iconDon't exceed a maximum of 6 links. Plan your page structure carefully when using it.
do-not iconDon't nest Tabs inside another Tabs.
do-not iconDon't place within a container smaller than the full page width.
do-not iconAvoid placing media such as a video or large components inside the Tab content area.

Implementation guidelines

Name Class Description
Active state .is-active Set active state of a single Tab. Apply to both .tabs__title and corresponding .tabs__panel elements to correctly set.