ui patterns
Tabs
What are tabs?
Tabs slice one area of the screen into parallel panels and show just one at a time. They keep a page short by hiding all but the panel you've picked - which is the whole trick, and the whole risk.
Also known as: tabbed navigation
Prefer to watch?
Watch the recap 0:34
The demo
A product page with four sections. Read it as tabs, then switch it to one long page - and notice how much the tabs were keeping out of sight.
Overview
The Allotment kettle: a 1.7-litre stainless flask with a quiet boil and a hinged lid. Pour-stop spout, cool-touch handle, hides its cable in the base.
Specs
- Capacity: 1.7 litres
- Power: 3000W
- Weight: 1.1kg empty
- Warranty: 2 years
Reviews
"Boils fast and the handle stays cool." - 4.5 out of 5 from 212 buyers. The recurring gripe: it's louder than the listing lets on.
Delivery
Standard delivery is £4.95 and takes 3-5 working days. Returns are accepted for 14 days, but you pay the return postage.
Tabs mode: three of the four panels are hidden right now - including the delivery cost and the returns terms.
What this demo shows (text version)
The same product information - overview, specs, reviews and delivery - is shown in two layouts. In tabs mode you see one section at a time and click a tab to swap to another, so three of the four are always hidden. In one-long-page mode every section is stacked and visible together.
The point is the trade. Tabs keep the page short and scannable, but they bury everything you didn't pick - and people often never click past the first tab, so a detail like the £4.95 delivery charge can go unseen right up to checkout. A long page shows everything at the cost of length. Tabs suit parallel content you rarely need to compare; they hurt when the decision depends on facts spread across several panels.
Tabs slice one area into parallel panels and show just one at a time, keeping a page short by hiding all but the panel you've picked - which is both the trick and the risk. Use them for content people dip into one section at a time, and never hide something they need to compare or shouldn't miss, like a delivery cost, behind a tab.
Flip to "one long page" and everything you just had to click for is suddenly there at once. That's the tab bargain laid bare: tabs buy you a tidy, scannable surface by burying every panel you didn't choose behind a click you might never make.
Tabs are for content that's genuinely parallel and rarely compared - pick one view, ignore the rest. The moment people need to hold two panels in their head at once (specs against reviews, this plan against that one) tabs turn into a memory test, because you can only ever see one side of the comparison.
My rule: never hide anything load-bearing in a non-default tab. If a detail decides the sale - the delivery cost, the cancellation terms - it shouldn't live behind a click most people won't make. Tabs tidy the page; they don't excuse hiding the thing the page is for.