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-box	Tab strip	Flex container of tab buttons
button	Individual tab	Each clickable tab label
tabs__body	Content panel wrapper	Hidden by default — add is-active to show

State modifiers

Applied alongside the tab button or tabs-body via JavaScript.

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

Basic tabs

One tabs-body per tab button. Toggle is-active on both with JavaScript when a tab is clicked.

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

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

Live example:

With icons

Icons can be placed inside the button alongside a label. On mobile the label is hidden visually but remains available to screen readers.

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

Live example:

Disabled tab

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

          
<button class="is-disabled" disabled>Unavailable</button>
          
        

Live example: