Navigation
Tabs
Tabs are a way to keep several related chunks of content in one place and swap between them by clicking a label, showing only one at a time.
Definition
Tabs let you keep several related chunks of content in one place and swap between them by clicking a label, showing only one at a time. A row of titles sits near the top, and below them you see only the content that belongs to the tab you picked. Because nothing navigates to a new page and the content simply swaps in the same spot, people can move between pieces of information lightly, without losing their place. Tabs fit especially well when one thing has several sides to it, like a product page split into Description, Reviews, and Shipping. The metaphor comes from the labeled dividers in a physical file folder, so even a first-time visitor can guess that pressing a label changes what shows below.
Why does it matter?
When a single screen has a lot to hold, tabs stop you from cramming it all in at once and instead let people pull up just the slice they need. The page gets shorter, scrolling eases up, and because each tab carries one clear topic, the information structure reads more sharply too. Best of all, nothing reloads, so switching is instant and the mental cost of comparing one thing against another stays low. That lightness is a real advantage when someone needs to look at the same subject from several angles. The catch is that tabs hide whatever you did not select, so people cannot tell at a glance what is waiting inside the other tabs. That means you have to choose carefully what to tuck behind a tab and what to keep visible all the time.
Common mistakes
- Forcing unrelated content into one tab set. The items under a set should be different sides of the same subject. When they sit at mismatched levels, people get confused about what the grouping is based on and have to guess which tab holds what they came for every single time.
- Making too many tabs. As the count climbs, labels get squeezed or a horizontal scroll appears, so the tabs at the far end never get noticed and people wander around hunting for the item they want. A tab pushed off-screen might as well not exist.
- Giving a weak signal for which tab is currently selected. When the active spot is faint, people are not sure where they are looking, so they press the same tab again or assume the content is not changing.
Practical tips
- Mark the selected tab clearly with an underline or a color. Two to five tabs is usually the sweet spot, and past that it is worth pairing tabs with another approach like a dropdown or a vertical list. Cutting the count down is itself a form of good tidying.
- Write tab labels as short, predictable words. If the name alone tells people what is inside, they head straight to the tab they want with no wasted clicks. A concrete noun always beats a vague one.
- Put the most important or most-viewed content in the first tab. Since it is the one shown by default when the group first opens, placing your core content here means most people meet what they need with no extra action.