Tabs (UI)
A row of labels that switch between alternative views of the same object, showing one panel at a time.
Tabs work when the panels are peers — different views of one thing, where a person wants one at a time and rarely needs two at once. A user record with Profile, Activity, Billing and Permissions is a good fit: same object, parallel facets, no reading order. The pattern breaks the moment the panels are sequential steps (that is a stepper) or the moment somebody needs to compare across two of them, because tabs make comparison impossible by design.
Two failures account for most broken tab implementations. The first is hiding content people need to find: anything inside a tab is invisible to Ctrl+F and, on many implementations, to search engines. The second is state — switching tabs should not lose a half-filled form, and the selected tab should be in the URL so a link goes where the sender is looking. Add keyboard support (arrow keys between tabs, Tab into the panel) and most of the remaining complaints disappear.
Tabs vs accordion
Tabs suit a handful of peer views on a wide screen and show exactly one at a time. An accordion suits a longer list of sections, lets a person open several at once, and survives narrow screens where a tab row would wrap or scroll. Over roughly six items, or on mobile, the accordion is usually the honest choice.
In practice
A banking app put Statements behind the fourth tab of an account screen. Support logged a steady stream of “where do I download my statement” tickets. Analytics showed 8% of sessions ever changed tab. Surfacing Statements as a visible action on the main panel and keeping the tab as well dropped those tickets by about two thirds.
Where teams get it wrong
- More than six tabs, or tabs that wrap to a second row — at that point the content needs navigation, not tabs.
- Putting content people search for inside a hidden panel where Ctrl+F cannot reach it.
- The active tab not in the URL, so every shared link opens on the first panel.
- Losing form state on tab switch.
- Styling tabs so the selected one is distinguished only by colour, which fails for low-vision and colour-blind users.
( Learn more )
Related terms
All terms- Accordion (UI)A stack of headers that expand to reveal content, used to compress a long page into a scannable list of sections.
- Stepper (UI)A control that breaks a task into ordered steps and shows where somebody is in the sequence.
- Segmented ControlA small row of mutually exclusive options that switches how a view is shown, not what it contains.
- Sidebar NavigationA vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.