Library / UI components / Tabs
No. 004·noun·also called tab bar, segmented view

Tabs

A row of labels that switch between different views in the same spot, like folder tabs.

SPECIMEN · LIVE DEMO
Definition

What it is

Tabs let one area of the screen show several views, one at a time. Clicking a tab swaps the content below it without leaving the page.

Use tabs when the views are related but separate and people rarely need two at once: Overview, Activity, Settings. Keep the labels short and the count small (two to six). If people need to compare views side by side, tabs get in the way.

Tabs are different from navigation that takes you to a new page, and from a segmented control, which is a compact tab-like switch usually used to filter or change a mode.

Say it like a builder

How to ask for it

Vague

“The project page has too much stuff. Can you split it up so you click to see different parts?”

Precise

“Split the project page into three tabs: Overview, Tasks, and Files. Keep the project header visible above the tabs, remember the last tab in the URL, and default to Overview.”

Why it works

"Split it up" could mean separate pages or collapsible sections; "tabs" names the pattern and the prompt fixes the labels, the header, and the default.

In the wild

You've seen this in

  • GOverview, Insights, and Settings on a GitHub repository
  • GThe All, Images, News row on Google search
  • XProfile tabs on X: Posts, Replies, Media
Usage note

Often confused with

AccordionAn accordion stacks sections vertically and can open several; tabs show one view at a time in place.SidebarA sidebar navigates the whole app; tabs switch views within one page.