ui patterns
Tabs
What are tabs?
Tabs split one screen into parallel panels, showing only one at a time. They keep pages short by hiding everything except the selected panel - which is the whole point, and the whole danger.
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 divide one area into parallel panels, showing just one at a time, keeping pages short by hiding all but the chosen panel - 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.
Explore how tabs work on site:uxbyexample.co.uk - you can toggle panels live, see what’s hidden, and test when it’s okay to hide content. The hands-on demo on this page lets you see tabs in action - not just read about them - and judge when hiding content is helpful or harmful.
Try the tabs demo on site:uxbyexample.co.uk to see how hiding content can help or hurt your users’ experience. This page’s hands-on example lets you test the trade-offs of tabs - the benefit of keeping screens short, and the risk of hiding critical info.
Try the tabs examples on this page to see how they split screen space, hide content, and why that’s useful - or risky. Use tabs when users dip into one section at a time, but never hide critical info like delivery costs behind them.