Tabs that overflow the width must scroll or collapse
Aliases: scrollable tabs · more tabs
What it is
Tabs have to fit every facet name in one row. Too many names, or a long language, and the row outruns the object’s width. Overflowing tabs must choose between “scroll to see the rest” and “fold into More”, or facets leave the tappable set and the parallel preview breaks. It is the same class of width problem as a bottom tab bar’s count cap, on a different container: in-page tabs may scroll, because they need not all stand as app-level landmarks at once.
Why it happens
With no overflow, every facet name is co-present; one sweep says how many blocks the object has. After overflow, undisplayed facets are temporarily absent, and use tilts toward whatever still sits on the first screen. Horizontal scrolling keeps the model “they are still one row of tabs”, at the cost of discovery and of fighting the page’s vertical scroll for the gesture. Folding into More keeps the visible slots readable, at the cost of another hide: facets inside More need an extra tap before they rejoin the parallel set.
Neither strategy is “shrink the type until it fits”. Type too small to read means the count fits mathematically and the preview is already dead. If the selected item scrolls out of view after overflow, selected state and name split, and people do not know which facet they are in. So overflow strategy also includes “the selected item must be pulled back into view”.
Where it stops holding
Facets that keep growing past one row are a sign they may not be parallel facets of one object; re-architect rather than scroll forever. What a wide desktop row can hold is not a phone policy. Nested with a horizontal page carousel, tab scrolling is almost unusable, and folding is better. Screen readers do not depend on this row’s visible width, but More must still be a real, reachable control.
Applying it
- When it will not fit, pick scroll or More: scroll if facets are homogeneous and people switch among neighbours; More if facets are mixed and rarely visited.
- Always bring the selected item into the visible row; do not let the current facet exist only as a highlight stub off-screen.
- Do not cram by shrinking type. When vertical scrolling coexists, give the tab row a distinct horizontal-swipe strip so the whole page is not dragged sideways.
- How to check: at the narrowest width, list every facet and count names readable without scrolling or opening More. Run a find task on the unreadable ones; failure means overflow did not patch the preview. Then select an item that was off-screen and see whether it is brought into view.