Skip to main content
Frontend Glossary

UI components · Navigation

Tabs

Also called: Tab bar, Tab panel, Tabbed view, Tab switcher

A row of clickable labels where clicking one shows its content panel below. Used to switch between a few peer blocks of content in the same spot.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Below the title on the detail page, add a set of tabs: "Overview," "Order history," and "Activity log." The current tab is bold with a 2px dark underline. The others are gray and darken on hover. Clicking a tab only switches the panel below without reloading the page. Store the current tab in a URL parameter so it stays selected after a refresh.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Tabs is what you need.

Use Tabs when

  • When one object has several peer blocks of info and users look at one at a time, like overview, history, and logs on a detail page
  • 2 to 6 content groups, each with plenty of content, where laying everything out would make the page too long
  • Blocks that are independent of each other, where users don't need to compare them side by side

Pick something else when

  • Flows with a set order that must be completed step by step, like sign-up or checkout

    Use insteadSteps

  • When users need to compare several blocks at the same time, since tabs only show one at a time

  • More than 7 groups, or names too long to fit as tabs

    Use insteadSidebar Menu

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Building a multi-step form as tabs, so users can skip earlier steps and jump straight to the last one to submit

  2. 02

    Nesting another set of tabs inside a tab, so users can't tell which level they're on

  3. 03

    Using tabs as the site's main navigation, where each tab is really a completely different page

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A row of tab headers with matching content panels below. Only one panel shows at a time.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Tabs stack a few peer blocks of content in the same spot. There's a row of tab labels on top. Click one to show its panel and hide the rest. They're common on detail pages ("Overview / Order history / Activity log") and for grouping settings. The selected tab gets an underline or a background highlight.

Each block inside tabs is independent, and users can view them in any order. Steps, on the other hand, show a process with a set order, where you finish step one before moving to step two. So a multi-step form that's filled in order should use steps, not tabs.

2 to 6 tabs is about right. More will overflow horizontally. If you're only switching between two or three views of the same data (like list and grid), a segmented control is lighter.

Developer info
Term ID
component-tabs
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • [role="tablist"]
  • .ant-tabs
  • .el-tabs
  • [class*="MuiTabs-root"]
  • .arco-tabs
  • .t-tabs
  • .n-tabs
  • [data-slot="tabs"]
  • .nav-tabs
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026