Navigation · §5.21

Tabs

In-page views.

Variant
Theme
Contrast
Language
Motion
Text size

Code

<Tabs value={tab} onValueChange={setTab}><TabsList>…</TabsList><TabsContent value="…">…</TabsContent></Tabs>

Accessibility

  • Arrow keys move between tabs; panels are labelled by their tab.

Usage

Do

  • An underline in primary.

Don't

  • Never for primary navigation.

Platforms

Web
apps/web/components/ui/tabs.tsx
iOS
SwiftUI Picker(.segmented) or TabView
Android
Compose PrimaryTabRow