Tabs

Tabs shows one of several related panels in the same space. It is authored ARIA markup plus a small init() module for keyboard behavior, with two variants, two sizes, two orientations, and a CSS-only links form.

Public web API

Write the full ARIA markup on the server, with the first panel visible. init() adds only behavior.

<div data-bitsy-tabs>
  <div data-bitsy-tabs-list role="tablist" aria-label="Project">
    <button data-bitsy-tabs-tab role="tab" type="button" id="tab-overview" aria-controls="panel-overview" aria-selected="true">Overview</button>
    <button data-bitsy-tabs-tab role="tab" type="button" id="tab-activity" aria-controls="panel-activity" aria-selected="false" tabindex="-1">Activity</button>
  </div>
  <div data-bitsy-tabs-panel role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">…</div>
  <div data-bitsy-tabs-panel role="tabpanel" id="panel-activity" aria-labelledby="tab-activity" tabindex="0" hidden="until-found">…</div>
</div>

<script type="module">
  import { init } from "@bitsyui/bits/tabs/init";
  init();
</script>

Root data-bitsy-tabs; parts data-bitsy-tabs-list, -tab, and -panel.
data-bitsy-variant="segmented", data-bitsy-size="sm", and data-bitsy-tabs-activation="manual" go on the root; aria-orientation="vertical" goes on the list.
Inactive panels carry hidden="until-found", so nothing flashes and find-in-page can still reveal them.
Give the list an aria-label, and keep interactive controls out of tabs.
init() fires bitsy:tabs-change on the root with the tab and panel in detail.

Variants and sizes

The selected state is the ARIA state, so what you see matches what assistive tech hears.

Line (default)

Overview content.

Segmented

Overview content.

Small, with a disabled tab

Overview content.

Segmented, small, manual activation

Overview content.

Vertical and overflow

A vertical list sits beside the panels. A horizontal list that is too wide scrolls on its own and fades at the clipped edge.

Vertical

Overview content.

Too wide for its space

Overview content.

Links form

For navigation that changes the URL, use links styled as tabs. No roles, no panels, no script, and the normal Tab order.

<nav data-bitsy-tabs-list aria-label="Settings">
  <a data-bitsy-tabs-tab href="/settings/profile" aria-current="page">Profile</a>
  <a data-bitsy-tabs-tab href="/settings/billing">Billing</a>
  <a data-bitsy-tabs-tab href="/settings/team">Team</a>
</nav>

Keyboard and events

Tab enters the list once, on the selected tab, and the next Tab moves into the panel.
Left and Right (Up and Down when vertical) move between tabs with wrap; Home and End jump to the ends.
Focus selects by default. With manual activation, Enter or Space selects.
Disabled tabs (aria-disabled="true") can be focused but not selected.
Find-in-page that reveals a hidden panel selects its tab. Calling init() twice is safe, and it returns a cleanup function.

Foundation versus Bit

The foundation styles button and a but has no tab list. data-bitsy-tabs resets that chrome on its own tabs and adds the variants, sizes, and states, all read from ARIA. The keyboard model needs a script because the platform has no tabs element yet.