tab-navigation

Tab Navigation

Tabs organise related content under a shared context. The tab strip communicates the full set of available views; switching tabs swaps the content panel without a page navigation. They work best when all views share a heading, a primary action, or a common subject — tabs that have nothing to do with each other belong in separate pages.

---

When to Use Tabs — and When Not To

Use tabs when…	Use something else when…
2–7 views share a common context (same record, same settings section)	There are more than 7–8 tabs — use a sidebar or section nav instead
Users switch between views frequently during a session	The content is sequential (use a stepper/wizard instead)
All tabs are equally valid entry points	One view is clearly primary — put the rest in a secondary nav or overflow
The views share a header or set of page-level actions	Each "tab" requires a different header and layout — use separate pages

---

Tab Types

Choose the visual style that fits the layout context.

Underline / Indicator Tabs

A horizontal strip with a sliding underline or bottom border on the active tab. The lightest treatment — appropriate for page-level tabs where the tab strip sits inside the content area.

Overview  |  Activity  |  Settings
──────────

Contained / Boxed Tabs

Each tab is a distinct box; the active tab appears connected to the panel below. Higher visual weight — appropriate for prominent tab groups near the top of a screen or within a card.

Pill / Button Tabs

Rounded capsules that toggle between states. Lower emphasis — appropriate for secondary content switches within a section (not page-level). Often used for view toggles (e.g. "List / Grid / Map").

---

Anatomy

┌─────────────────────────────────────────────────┐
│  Tab A  │  Tab B  │  Tab C  │                   │  ← Tab strip (role="tablist")
├─────────┴─────────────────────────────────────────┤
│                                                   │
│   Tab panel content                               │  ← Tab panel (role="tabpanel")
│                                                   │
└───────────────────────────────────────────────────┘