navigation

Tabs

A navigation pattern for switching between multiple related views.

Tabs switch between content views without leaving the page. They are appropriate for comparisons, settings sections, and frequently-switched views. Best when users need to reference multiple sections in one session.

Anatomy

  • Tab bar
  • Tab items (label)
  • Active indicator
  • Tab panel (content area)

Variants

Underline tabs (most common)Pill tabsCard tabs (raised)Vertical tabsScrollable tabs (many items)

States

DefaultHoverActive/selectedDisabled

Rules

✓ Do

  • •Max 5-6 tabs before reconsidering the structure
  • •Active state must be obviously different
  • •Keyboard: arrow keys navigate, Enter selects

✗ Don't

  • ×Don't use tabs for sequential steps (use stepper)
  • ×Don't use tabs when content in each pane is radically different
  • ×Don't use more than 6 tabs

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Tabs: 44px height, active = 2px accent underline + accent text. Inactive: ink-600. Hover: ink-900. role='tablist', role='tab', aria-selected. Arrow key navigation.