Tabs & Segmented Controls

Tabs and segmented controls switch between related views or categories within the same context without page navigation.

stellae.design

Design Principles

Tabs organize content into mutually exclusive sections; segmented controls toggle views of the same data. Both keep users in context. Tabs for distinct categories (Settings sections), segments for view toggling (List/Board/Calendar). Limit to 2-5 — more indicates IA restructuring is needed.

Why It Matters

Tabs and segmented controls both allow users to switch between views, but they serve different purposes and carry different expectations. Tabs organize distinct content panels within a shared context, while segmented controls toggle between different representations of the same data. Choosing the wrong pattern confuses users about what will change when they interact.

Real-World Examples

Account settings with tab panels

An account page uses horizontal tabs labeled Profile, Security, and Notifications, each revealing a completely different form panel. The active tab is visually connected to its panel through a shared background, and inactive tabs are clearly distinguished. Keyboard users can arrow between tabs and press Tab to enter the active panel.

Map/List/Grid segmented control

A real estate search results page offers a segmented control to toggle between Map, List, and Grid views of the same property results. The data does not change — only the presentation shifts. The control uses pill-shaped segments with the active option filled, making the current state immediately obvious.

Counter-example

Tabs that trigger full page navigation

A product page uses tab-styled links that each load an entirely new page: Overview, Specifications, and Reviews. Users expect tab interactions to be instant and contextual, but the full page reload breaks their mental model and loses scroll position. These should be either true tabs with panel switching or styled as standard navigation links.

Role-Specific Guidance

Common Mistakes

• The most frequent mistake is using tabs when the content is really navigation — if clicking a 'tab' changes the URL and reloads the page, it should be styled as navigation links, not tabs. Another error is failing to implement keyboard navigation, which leaves screen reader and keyboard users unable to operate the control. Designers also often create scrollable tab bars with too many items, hiding tabs off-screen without any indication that more options exist.