Tabs organize content into separate views within the same page context. Users switch between views without leaving the page.
| Variant | Style | Use |
|---|
| Underline | Bottom border on active | Default, most common |
| Pills | Rounded background on active | Filters, segments |
| Line | Simple text with separator | Minimal UIs |
| Property | Description |
|---|
| Activation | Click to switch |
| Keyboard | Left/Right arrows to navigate |
| Overflow | Horizontal scroll on mobile |
| Default tab | First tab selected by default |
- Short labels — 1–2 words max per tab
- Consistent width — tabs shouldn’t jump when switching
- Nested tabs — avoid; use separate pages instead
- Don’t nest tabs — use pages + sidebar for deep navigation
- Preserve tab state — remember active tab in URL hash
- Tab count — 2–6 tabs; more than 6 → use dropdown or sidebar