Navigation · core

Segmented tabs

navigation.segmented-tabs

Segmented tabs: A wayfinding control that moves between locations, views, or levels of an interface.

segmented tabsthe control that changes viewsthe wayfinding element

States5

Touch target44px

Evidence6

Introduced by4 kits

Visual specimen

Same contract. Every kit voice.

MAVAN renderingdefault

Translation table

What code calls it.

Web<nav>This component is composed from multiple web primitives.pattern

ARIAnavigationNo single ARIA role represents the complete component.pattern

SwiftUIPicker(.segmented)The nearest named SwiftUI API.direct

AppKitNSSegmentedControlThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Navigation container
2Destination or view labels
3Current-location indicator
4Keyboard and focus behavior

Often confused with

Similar shape. Different contract.

Tabsnavigation.tabs

Shares a visual family, but has a different role, state model, or interaction contract.

Pill tabsnavigation.pill-tabs

Shares a visual family, but has a different role, state model, or interaction contract.

Bottom navigationnavigation.bottom-nav

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Segmented tabs component (navigation.segmented-tabs). Segmented tabs: A wayfinding control that moves between locations, views, or levels of an interface. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

jade · lumen · aurora · purple-rain