What it must accomplish
Organize related views at the same hierarchy level without turning the page into one long sequence.
Usage
Choose the control by behavior
- Sections are peers and share a parent context
- People benefit from switching between views quickly
- The number of labels remains manageable
- The sequence is a process or wizard
- Sections are unrelated destinations
- Important content would become undiscoverable behind many tabs
Anatomy
Stable parts create a reliable contract
- 1Tab list
- 2Active tab
- 3Inactive tabs
- 4Selection indicator
- 5Associated tab panel
- 6Optional overflow affordance
Interaction and keyboard behavior
- Tab enters the tab list
- Arrow keys move between tabs according to orientation
- Home and End may move to the first and last tab
- Activation can be automatic or manual, but must remain consistent
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Use the tab, tablist, and tabpanel relationships correctly
- Expose the selected state
- Keep focus behavior separate from visual selection when using manual activation
- Ensure panels have meaningful accessible names
Responsive considerations
Adapt the decision—not only the dimensions
On narrow screens, preserve the active tab and make overflow discoverable. Horizontal scrolling is preferable to shrinking labels until they become unreadable.
Content considerations
Language is part of the component
- Use short noun labels
- Keep labels parallel
- Avoid icons without text unless the meaning is universally clear and named accessibly
Patterns that weaken the experience
Using tabs as primary site navigation
Changing tab order between sessions
Loading heavy content on focus and making keyboard navigation slow
Allowing the selected tab to scroll out of view
Comparison
What to study across systems
Apple distinguishes tab bars, sidebars, and segmented controls by platform context; web systems generally follow the ARIA tabs interaction model while varying overflow and density.
Open comparison