Tabs

More tabs than fit

A tab strip wider than its container scrolls sideways. It never wraps and never clips, so no tab is unreachable.

The edge fades when there is more to reach — on the right when you are at the start, on the left when you are at the end, both when you are in the middle. It appears only when the strip actually overflows, so a strip that fits is never dimmed.

It is a mask rather than a gradient background on purpose: a background fade has to know the colour behind it, and this list sits on the page canvas here but on a card surface inside an app. A mask fades to transparency, so it composites correctly over whatever is actually there. The fade is also dropped under forced-colors, where costing contrast to give a hint is the wrong trade.

Why a fade and not arrow buttons: arrows would need either an overlay background (the same colour problem) or a wrapper injected into your markup, to duplicate what shift+wheel, a trackpad swipe and the arrow keys already do. Keyboard users never needed it — arrow keys move between tabs and the browser brings the focused one into view, including tabs that are off-screen.

A left rail instead of a strip

Add bo-tabs--vertical. That is the whole change — same markup, same initTabs(), same parts. Settings screens reach for this once there are more sections than fit comfortably across the top, and because the rail runs down the page it holds far more of them.

The arrow keys follow the rail. Up and Down move between tabs here; Left and Right do in the horizontal strip above. You do not set aria-orientation — the behavior reads how the list is actually laid out and sets it, which matters because that answer changes with the container width.

The rail scrolls when it is taller than its box, and the fade moves to the top and bottom edges to match. Height comes from the panel beside it, so a rail with a few tabs simply doesn't scroll and is never dimmed. This demo pins 15rem to show the overflow; an app usually gets it from the surrounding screen.

Narrow containers get the strip back. Below 30rem — measured on the tab set's own width, not the window's, so a rail inside a widget collapses while the page around it is still wide — the rail becomes the horizontal strip, the panel moves underneath, and the arrow keys return to Left and Right. Resize this page to see it.

Markup

<div class="bo-tabs">
  <div class="bo-tabs__list" role="tablist" aria-label="Purchase order">
    <button class="bo-tabs__tab" role="tab" id="t-details"
            aria-selected="true" aria-controls="p-details">Details</button>
    <button class="bo-tabs__tab" role="tab" id="t-lines" tabindex="-1"
            aria-selected="false" aria-controls="p-lines">Lines</button>
  </div>
  <div class="bo-tabs__panel" role="tabpanel" id="p-details"
       aria-labelledby="t-details" tabindex="0">…</div>
  <div class="bo-tabs__panel" role="tabpanel" id="p-lines"
       aria-labelledby="t-lines" tabindex="0" hidden>…</div>
</div>
<script type="module">
  import { initTabs } from "@busy-office/ui/js";
  initTabs(); // once — arrow keys, Home/End, roving tabindex
</script>

Tabs require initTabs() — there is no CSS-only fallback. Without it the pre-set tabindex="-1" leaves tabs 2+ keyboard-unreachable. Arrow keys are direction-aware in RTL.

Quick reference generated

State attributes: data-overflowaria-selected

API generated from CSS

• ARIA contract: role=tablist/tab/tabpanel, aria-controls/aria-labelledby, panels hidden via the hidden attribute; add role="list" where lists are styled.
• Arrow keys are RTL-aware; activation is automatic on focus move.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 105 · Firefox 110 · Safari 16

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @container — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.