Tabs

Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information.

Tab Pills

<ul role="tablist" class="tablist">
  <li class="tablist__item">
    <a href="#" role="tab" aria-selected="true" class="tab tab--pill">
      Hogwarts
    </a>
  </li>
  <li class="tablist__item">
    <a href="#" role="tab" aria-selected="false" class="tab tab--pill active">
      Beauxbatons
    </a>
  </li>
  <li class="tablist__item">
    <button type="button" role="tab" aria-selected="false" class="tab tab--pill">
      Durmstrang
    </a>
  </li>
</ul>

Description

Our most common tab type. Accurately shows which view you are on using a rectangular pill shape. The active class requires JS.

Tab Switcher

<nav class="tab-switcher">
  <button type="button" class="tab-switcher__link">
    History of Magic
  </button>
  <button type="button" class="tab-switcher__link active">
    Defense Against The Dark Arts
  </button>
</nav>

Description

This is used to show / hide panes. The active class requires JS.

Do

  • Ensure there is always one active tab

Don't

  • Use the tabs style on panes or views that are not active
  • Use the tabs switcher for more than two items

Accessibility

- Receives `:focus` - `aria-selected` should be `true` when in focus and `false` when not