Tabs
A navigation pattern that switches between multiple content views within the same page context.
Plain English
Tabs organise content into switchable sections without navigating to a new page. They work best when users need to compare views or switch frequently between related sections. The active tab should be unambiguously different from inactive ones — a simple underline is more reliable than subtle background changes. The most common mistake is using tabs when the content should actually be separate pages, or when there are so many tabs they wrap to a second line.
Technical
Accessibility: use role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls, aria-labelledby. Keyboard: Left/Right arrows move between tabs, Enter/Space activates, Tab moves into the tab panel. Active indicator: underline (clear, unambiguous), filled background, or raised tab. Content panels: display: none on inactive, display: block on active (or React conditional rendering). Line tabs vs. pill tabs vs. card tabs: each has different visual weight and works in different contexts.
Live Demo
This product provides a complete design system with tokens, components, and documentation. Ideal for teams building scalable products.
Tabs work for same-level content. Never nest tabs. Never use more than 5–7 tabs.
Usage
✓ Good usage
A settings page with tabs (General / Security / Billing / Notifications) — clearly related sections that users switch between frequently.
✗ Bad usage
Tabs with 10 items that wrap to two rows — the second row of tabs is rarely seen and the pattern should be redesigned as a sidebar.
Recommended values
- Tab height: 40-48px
- Active indicator: 2-3px accent-coloured underline (most legible)
- Tab padding: 12-16px horizontal
- Font: 14-15px, 500 weight for active, 400 for inactive
- Max tabs: 5-6 before switching to a different navigation pattern
- Mobile: consider a scrollable tab bar or dropdown for many tabs
Common mistakes
- Too many tabs — if they wrap or require scrolling, rethink the information architecture.
- Active state too subtle — the difference between active and inactive must be immediately obvious.
- Using tabs for sequential steps — use a stepper instead.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Tabs: 44px height, 14px 500-weight text. Active state: 2px accent-colour underline at the bottom, accent text colour. Inactive: ink-600 text, no underline. Hover: ink-900 text. Max 5 tabs before considering a sidebar. role="tablist" / role="tab" with aria-selected.