Tabs

Tab navigation for switching between content panels.

Standard tabs

Uses ARIA tab pattern with role="tablist", role="tab", and role="tabpanel".

Code

<div class="tabs">
  <div class="list" role="tablist">
    <button class="tab" role="tab" aria-selected="true">Tab 1</button>
    <button class="tab" role="tab">Tab 2</button>
    <button class="tab" role="tab">Tab 3</button>
  </div>
  <div class="panel" role="tabpanel">
    <p>Tab content here.</p>
  </div>
</div>

Overview content goes here.

Pills variant

Rounded pill-style tabs without the underline indicator.

Code

<div class="tabs tabs--pills">
  <div class="list" role="tablist">
    <button class="tab" role="tab" aria-selected="true">All</button>
    <button class="tab" role="tab">Active</button>
    <button class="tab" role="tab">Archived</button>
  </div>
</div>

Link-based tabs

Use anchor tags with aria-current="page" for navigation-style tabs.

Code

<div class="tabs">
  <nav class="list">
    <a class="tab" aria-current="page" href="#">Overview</a>
    <a class="tab" href="#">Details</a>
    <a class="tab" href="#">History</a>
  </nav>
</div>