COMPONENT

Segmented

A compact group of links or buttons where exactly one is current. A language switcher, a view toggle, a filter across two or three states.

A language switcher

The shape it was built for: a few options, mutually exclusive, and all worth showing at once.

HTML

<nav class="segmented" aria-label="Language">
  <a class="segmented-item" href="#" aria-current="page">ENGLISH</a>
  <a class="segmented-item" href="#">POLSKI</a>
  <a class="segmented-item" href="#">ESPAÑOL</a>
</nav>

Every state

Current, rest, unavailable — and the two that compose. Hover and focus are live: put a cursor on one, then tab through them.

HTML

<nav class="segmented" aria-label="View">
  <a class="segmented-item" href="#" aria-current="page">CURRENT</a>
  <a class="segmented-item" href="#">REST</a>
  <a class="segmented-item" href="#" aria-disabled="true">UNAVAILABLE</a>
  <span class="segmented-item" aria-disabled="true" aria-current="page">CURRENT · UNAVAILABLE</span>
</nav>

Reference

Read from components/segmented.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.segmented.segmented-item

READS--ds-focus-ring-inset--ds-font-display--ds-hairline--ds-hit-min--ds-ink--ds-ink-disabled--ds-ink-soft--ds-pad-chip--ds-radius-control--ds-raised--ds-rule--ds-sunk--ds-text-ui--ds-track-subtle

Notes

THE CURRENT ITEM IS `aria-current`, NOT A CLASS

There is no .segmented-item-current, deliberately. The state a screen reader announces and the state a sighted reader sees are then the same fact and cannot drift — and of two spellings, the one that gets forgotten is always the accessible one.

Any truthy value works, so page, step or true all paint the same. aria-current="false" does not, which is what that value means.

WHEN TO REACH FOR SOMETHING ELSE

Two or three options, shown at once, is what this is for. The moment they are many, the control that fits is a .select — a segmented row of nine wraps into a block nobody scans.

AN OPTION THAT DOES NOT APPLY IS INERT, NEVER GONE

aria-disabled="true" dims it and drops its hover. Removing it instead re-lays out the row and slides a neighbour under a cursor already on its way down — and it hides the fact that the option exists, which for a language is the thing the reader came to find out.

CURRENT AND UNAVAILABLE COMPOSE

An option can be both — "this is the page you are on, and it is not ready yet". Current supplies the raised surface, unavailable supplies the dimmed ink, and each rule says in its own selector when it does not apply, so which one wins is never an accident of source order. A language switcher needs this: standing on a page whose translation has not landed, marking only the finished languages leaves the control with nothing selected, which reads as broken rather than honest.

THE SEPARATORS ARE THE GAP

Every hairline in the control is the group's own background showing through a one-hairline gap. Borders on the items would need a :first-child exception, and a wrapped row would then start with a stray edge. This way the hairlines are right in both axes at any width — which is also how it survives its 200px floor: it wraps, and the items grow to fill each row.