Tab Bar
Concept
A menu laying out a product's main sections in three to five slots along the bottom of a mobile screen, reachable from anywhere.
Why it exists
Fold a menu away on a narrow screen and the folded items stop getting used. Features moved behind a hamburger menu commonly lose more than half their usage. Finding something hidden requires knowing it exists first, and a first-time user doesn't.
Reach was the other problem. Hold a phone in one hand and the thumb covers roughly the bottom half of the screen. Put the menu in a top corner and every move means regripping the device.
So the form that settled was a few permanently visible slots along the bottom. Permanent visibility makes the space expensive, which is why the hard decision in this form isn't what to include but what to move out into the folded menu.
How it works
Three to five slots. At six the labels compress past readability, and the narrower targets produce more mistaken taps.
- Put an icon and a label in each slot. Icons alone mean different things to different people — a star is a favorite or a priority marker depending on who's looking, and only the label settles it.
- Mark the current section by emphasizing exactly one slot. Changing both the color and the icon fill carries the state to people who can't separate the colors.
- Slots hold sections of the product, not actions. Documents, Team, and Notifications are sections; New document is an action. Putting an action in the center slot is a widespread pattern, but that slot doesn't change the screen, which puts it out of step with its neighbors.
- Tapping the already-selected slot returns that section to the top. For someone deep in a long list, it's the fastest way back up.
- Preserve position when someone leaves a section and returns. Bouncing a half-read document back to the top of the list after a notification check means finding the place again.
On wider screens the same items get redrawn as a sidebar. Nothing is removed; the same sections are simply placed in a different form.
How it sounds at work
"Six slots truncates the labels. Let's move one into the folded menu."
Cutting scope on the basis of the slot ceiling.
"The center slot is an action, not a section, so it doesn't belong here."
Judging what this form accepts.
"Coming back from the notifications tab bounces the list to the top."
Position preservation is missing.
Pagedeck's mobile app revised this once. It started with five slots — Documents, Team, Templates, Notifications, Settings — and Noa's look at the usage log showed Settings opening about once a month per person. Settings moved behind the account photo in the top right and the bar came down to four. With the remaining four labels no longer truncated, use of the Templates tab rose slightly.
Easily confused with
| Term | What it changes | How it differs from a tab bar |
|---|---|---|
| Tabs | The content shown inside one screen | It swaps content in place without moving screens. A tab bar moves between sections of the product and stays in the same position on every screen |
Where to go next
- Navigation
see the five forms and which situation calls for which
- Breadcrumb
see the form that reports position in deep structures
Last updated 2026-09-16