Navigation / Views of one thing

Tabs

Switch between different views of one subject. Without JavaScript, all content stays visible.

Basic usage

Preview

HTML

Add classes to semantic HTML.

CSS

Load the stylesheet in your document.

HTML

<div class="tabs" data-dd-tabs>
  <div class="tablist" role="tablist" aria-label="Sample output format">
    <button class="tab" role="tab" id="sample-html-tab" aria-controls="sample-html" aria-selected="true">HTML</button>
    <button class="tab" role="tab" id="sample-css-tab" aria-controls="sample-css" aria-selected="false">CSS</button>
  </div>
  <section class="tabpanel" role="tabpanel" id="sample-html" aria-labelledby="sample-html-tab"><h3 class="tabpanel-title">HTML</h3><p>Add classes to semantic HTML.</p></section>
  <section class="tabpanel" role="tabpanel" id="sample-css" aria-labelledby="sample-css-tab"><h3 class="tabpanel-title">CSS</h3><p>Load the stylesheet in your document.</p></section>
</div>

Classes & attributes

Class / attribute	Purpose
`data-dd-tabs`	The tab group.
`.tablist / .tab`	The tab strip and individual buttons.
`.tabpanel / .tabpanel-title`	The content and its heading for print or JavaScript-free reading.
`aria-controls / aria-labelledby`	Connect each button and panel using unique IDs.

Usage notes

Do not add hidden to inactive panels in the initial HTML. Arrow keys, Home, and End navigate the tabs. All panels appear in print.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.

Explore variations in Storybook ↗All components →