Tabs

Segment related content into clear, accessible panels with a single tabs root and semantic child elements.

Live Example

The tabs component provides an organized way to display related content. Each tab button controls the visibility of a corresponding panel.

Markup

Tabs use semantic HTML with ARIA attributes for accessibility:

<div class="tabs">
  <menu class="tabs" role="tablist" aria-label="Documentation sections">
    <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Overview</button>
    <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Examples</button>
  </menu>

  <div id="panel1" role="tabpanel" aria-labelledby="tab1">
    <p>Content for tab 1</p>
  </div>
  <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
    <p>Content for tab 2</p>
  </div>
</div>

Features

  • Semantic HTML - Uses native <button> elements
  • ARIA Attributes - Full accessibility support
  • Keyboard Navigation - Tab and arrow key support
  • Focus Management - Proper focus states
  • Token-Based Styling - Customizable with CSS variables

Accessibility

  • role="tablist" - Container for tab buttons
  • role="tab" - Individual tab buttons
  • role="tabpanel" - Content panels
  • aria-selected - Indicates active tab
  • aria-controls - Links tab to panel
  • hidden - Hides inactive panels

Best Practices

  • Use clear, concise tab labels
  • Order tabs by importance or logic
  • Include keyboard navigation support
  • Keep content organization simple
  • Maintain consistent styling across tabs
  • Ensure focus indicators are visible

Use Cases

The Tabs component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.