Skip to content
界面图谱Interface Atlas
☰
中文
ComponentsNavigation / Layout

Tabs

标签页

Aliases:选项卡tab 切换页签切换标签浏览器那种标签分栏切换

What is it

A row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.

Name disambiguation

Tabs switch peer content panels. A segmented control is a compact mode/filter switch. A breadcrumb shows hierarchical location.

Interactive playground

Try it. Make an informed choice.

Choose an appearance, then navigate panels with arrows, Home and End.

Loading lab…

What to look for

  • 01Synchronize focus and selection; connect tabs to their panels.
  • 02Switch related content within the same context rather than navigating away.

From reference to practice

AI-generated visual references · Open the full collection

✓ When to use

  • Parallel views of one object — overview / activity / settings
  • Switching in place instead of full-page navigation
  • Tightly related contents with ≤ 7 tabs

✕ When not to use

  • Unrelated contents — split into pages or routes
  • Users must compare two panes side by side
  • Sequential flows — use a stepper

Variants

Underline

下划线式

Active marker under the label, Material-style

Pill / Segmented

胶囊分段式

Rounded segmented control, iOS-style

Card

卡片式

Tab cards fused with the panel

Implementation

flexborder-bottom: 2px solidtransformtransition

Semantics: role="tablist" > role="tab" (aria-selected) + role="tabpanel" (aria-labelledby, non-active panels hidden). Animate the active indicator with an absolutely positioned bar sliding via transform: translateX; panels may fade on switch. Keyboard support needs roving tabindex with arrow keys.

Platform API

role="tablist"role="tab"role="tabpanel"

In code

The exact names this thing goes by in each ecosystem — use the row that matches your project.

FrameworkName
ARIA APGTabs
shadcn/uiTabs
MUITabs
AntDTabs

Related concepts

Accordion手风琴

A vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.

ComponentsSimilar
Breadcrumb面包屑

A hierarchical path like "Home / Library / Page" that states where the user sits in the information architecture: every ancestor is a link back, and the last item marks the current page. The cheapest way to keep users oriented — the name comes from the breadcrumbs Hansel dropped to find his way home. Usually placed above the page title.

ComponentsSimilar
Pagination分页

A page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.

ComponentsSimilar
Dropdown下拉菜单

A menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.

ComponentsSimilar
Sidebar侧边栏

A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.

ComponentsSimilar

Not to be confused with

Segmented Control分段控制器

A segmented control is compact for modes/filters; tabs section content.

Breadcrumb面包屑

A breadcrumb shows hierarchy; tabs show peers.

Sidebar侧边栏

A sidebar is persistent navigation; tabs are a strip inside content.

Applicable styles

Sources

Markdown for agents · JSON