Tab count is capped by width and legibility
Aliases: bottom navigation capacity · five-tab cap
What it is
A bottom tab bar lays peer destinations along the lower edge; each destination must hold an icon and a short label at the same time. The tab bar item limit is not a memory-span problem. It is whether each target in that fixed width can still be read and hit. A sixth or seventh item does not mainly make choice harder. It truncates text, packs icons into a smear, and shrinks hit boxes until neighbours steal the tap.
Why it happens
Available width is the screen minus safe areas and separators. Each item must fund a minimum recognizable icon, a minimum readable label, gaps between items, and a finger-sized hit box. Stack those demands and five items already sit on the floor of a typical phone width. Adding more can only spend one of them: ellipsis, icon-only, or a horizontally scrolling bar. Ellipsis makes two items read the same, icon-only hands recognition to glyphs, and scrolling takes away the bar’s core promise that every destination is visible at once.
Count also changes how people scan. Three items are seen almost in parallel; five are swept left to right; past the visible width, off-screen items are temporarily absent. Use then tilts toward whatever still sits in the first screen. Later destinations go unused not because they are unimportant, but because they are no longer co-present.
Studying it
Run a width squeeze: the same destinations, three through seven, on small and large phones, measuring label read-aloud accuracy, adjacent-item misses, and time to point at a named destination. Independent variables: item count, presence of text, whether horizontal scrolling is allowed. Dependent variables: number of discriminable items (not total items), whether the first hit lands on the target, and reports of “there are entries I cannot see”.
Exposure rate is more useful than satisfaction: how many destinations are visible without scrolling or opening an overflow. When exposure drops, use of those destinations usually drops with it, even if information architecture still calls them top-level.
Where it stops holding
Tablet and desktop bars or side rails can hold more because width and hit boxes are larger; the phone five-item cap does not travel. Icon-only items with names supplied by the system can admit a few more, but only for people who already know the glyphs. Label length varies sharply by language: five English items may fit where four German or full Chinese labels already truncate. When one item is “More” and the rest stay on the bar, visible count is still width-bound; More only catches overflow, it does not raise how many can be read at once.
Applying it
- On the narrowest target device, lay out the real label copy: every item must show its icon, finish its text, and take a hit. If it will not fit, cut items rather than shrink type.
- Prefer a fifth item that is “More” over cramming six onto the bar.
- Do not make a scrolling tab bar the primary navigation; needing to scroll means this layer is no longer a set of co-visible peer destinations.
- How to check: screenshot at minimum width, ignore your own memory, and count items that can be read without scrolling. Any item that cannot should not claim to be a top-level tab. Then tap neighbouring items with a thumb or a glove; a miss means count has eaten the hit box.