Tabs

TL;DR

• Divide related content into separate views.
• Enable quick switching within a page or app.
• Reduce clutter by avoiding multiple screens.
• Common in browsers, apps, and dashboards.

Definition

A tab is a user interface element that groups content into labeled sections, allowing users to switch between them without navigating to entirely new pages or screens.

Detailed Overview

Tabs are one of the most familiar patterns in digital interfaces, allowing users to switch between sections of related content quickly. Whether in a web browser with multiple sites open or in an app with settings divided by category, tabs keep interfaces clean and structured.

A frequent question is how tabs differ from menus. Menus typically navigate to different areas or pages, while tabs organize closely related content within the same context. For example, a settings page may use tabs for “Account,” “Notifications,” and “Privacy,” keeping all options accessible without forcing users to leave the page.

Another common query is about placement. Tabs are usually placed horizontally at the top of a section, though vertical tabs are sometimes used in complex applications. Placement depends on screen size and content density. Mobile apps often adapt tab layouts to fit small screens without overwhelming users.

Teams often ask about the number of tabs to include. Best practice is four to six tabs. Too many creates visual clutter and makes labels harder to scan. Overflow solutions like “more” menus can hold additional items without breaking usability.

Accessibility is another frequent topic. Tabs must be keyboard-operable, with clear focus indicators, so users relying on assistive technologies can switch sections easily. Labels should be descriptive and avoid ambiguity, since unclear tab names make navigation harder.

Finally, tabs support efficiency and continuity. They reduce context-switching by allowing users to compare or navigate content without loading new screens. This makes them particularly useful in productivity tools, dashboards, and browsers, where speed and organization are critical.

Learn more about this in the Tabs Exercise, taken from the Mobile Navigation & Input Components Lesson, a part of the Mobile Design Course.