Tabs
A row of labeled buttons that each show a different panel of content, with only one panel visible at a time.
Tabs let users switch between related views without leaving the page. The active tab is visually distinct, and the W3C ARIA pattern requires keyboard arrow keys to move between tabs. Material calls them 'tabs', iOS uses 'segmented control' for a similar pattern in narrower contexts. Don't confuse tabs with a tab bar, which is the bottom navigation on mobile apps.
Also called
tab grouptab striptabbed interface
When to use
- Splitting related content into peer views (Overview, Activity, Settings)
- Letting users compare states without navigating away
- Organizing a long page into navigable sections
When not to use
- Sequential steps in a flow (use a stepper or wizard)
- Many top-level destinations (use a sidebar or tab bar)
- Content the user should see all at once
Related
Source
W3C ARIA Authoring Practices Guide. Material Design and Radix UI both ship a Tabs component.