Tabs

Paired panels, subtle content arrival and a sliding active underline, with keyboard navigation.

Basic structure

div[data-tabs] > div.tabs-list + sections.tab-panel

Try it

One clear view.

Use the buttons, arrow keys, Home or End to select a panel.

The supporting details.

Content arrives with a restrained fade and vertical movement.

Next steps.

All content remains available without JavaScript.

HTML

<div data-tabs><div class="tabs-list" aria-label="Example views"><button id="tab-one" type="button" aria-controls="view-one">Overview</button><button id="tab-two" type="button" aria-controls="view-two">Details</button><button id="tab-three" type="button" aria-controls="view-three">Next steps</button></div><section class="tab-panel content" id="view-one"><h3>One clear view.</h3><p>Use the buttons, arrow keys, Home or End to select a panel.</p></section><section class="tab-panel content" id="view-two"><h3>The supporting details.</h3><p>Content arrives with a restrained fade and vertical movement.</p></section><section class="tab-panel content" id="view-three"><h3>Next steps.</h3><p>All content remains available without JavaScript.</p></section></div>

Options

Class or attribute	What it does
`aria-controls + unique ids`	Connect each button and panel.
`arrows / home / end`	Roving keyboard focus and selection.
`without js`	All panels remain readable.