tabs overview

Use tabs to let users navigate between related sections of content without leaving the page.

Accessibility

  • Tabs require JavaScript to toggle the is-active class on the active tab and show/hide content panels
  • The active tab gets class="is-active"
  • The active body panel gets class="tabs__body is-active"
  • On mobile, icon-only tabs hide the label text visually but it remains accessible via screen readers

Props

These are the CSS classes available on the tabs component.

Structure classes

Build the tab strip and content panels using these classes in order.

Class Applied to Description
tabs__container Wrapper element Contains the tab strip
tabs Tab strip CSS grid row of tab items — defaults to 3 equal columns
tabs__item Individual tab Each clickable tab label
tabs__body Content panel wrapper Hidden by default — add is-active to show

State modifiers

Applied alongside tabs__item or tabs__body via JavaScript.

Modifier Applied to Description
is-active tabs__item, tabs__body Marks the selected tab and shows its content panel
is-disabled tabs__item Prevents interaction and applies a muted style

Basic tabs

One tabs__body per tabs__item. Toggle is-active on both with JavaScript when a tab is clicked.

          
<div class="tabs__container">
  <div class="tabs">
    <div class="tabs__item is-active">Tab one</div>
    <div class="tabs__item">Tab two</div>
    <div class="tabs__item">Tab three</div>
  </div>
</div>

<div class="tabs__body is-active">
  <div><p>Content for tab one.</p></div>
</div>

Live example:

Tab one
Tab two
Tab three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

With icons

Icons can be placed inside tabs__item alongside a label. Wrap the label text in a <p> element — the tab CSS handles spacing automatically. On mobile the label is hidden visually but remains available to screen readers. 

          
<div class="tabs__container">
  <div class="tabs">
    <div class="tabs__item is-active">
      <i class="fas fa-calendar" aria-hidden="true"></i>
      <p>Upcoming</p>
    </div>
    <div class="tabs__item">
      <i class="fas fa-history" aria-hidden="true"></i>
      <p>Past</p>
    </div>
    <div class="tabs__item">
      <i class="fas fa-times" aria-hidden="true"></i>
      <p>Cancelled</p>
    </div>
  </div>
</div>

Live example:

Upcoming

Past

Cancelled

Upcoming appointments content.

Past appointments content.

Cancelled appointments content.

Disabled tab

Add is-disabled to a tabs__item to prevent interaction. Ensure the tab is also not selectable via JavaScript when this class is present.

          
<div class="tabs__item is-disabled">Unavailable</div>

Live example:

Tab one
Tab two
Unavailable

Content for tab one.

Content for tab two.

This panel is never shown — its tab is disabled.