Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Live Demo
Actually clickable- Went to the beach today and found a really unusual piece of sea glass
- Spent the whole afternoon shooting, just for this one frame
- Overcast works too — the light is so soft
What you just saw:Open a user profile on Xiaohongshu (RED) and the top has four tabs — Profile / Videos / Liked / Saved. Tapping one swaps the content below it. That is tabs.
What it actually is
The key to tabs is "peer level + has a URL + preserves context". Tapping "Profile" changes the URL to /profile instead of pushing a new screen. Tabs carry different views of the same level.
Anatomy · What it's made of
Tab List标签栏
Laid out horizontally, with an indicator along the bottom
Active Indicator选中指示
An underline or filled block marking the current tab
Tab标签
Short label, ideally 1–4 characters
Panel内容面板
The content region mapped one-to-one with a tab
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| 2–5 peer content sections | Yes |
| Switching keeps the user in the same page context | Yes |
| Every section has real content | Yes |
| The content has a required order (use a Stepper) | No |
| Two options are mutually exclusive rather than "both worth a look" | Depends |
Past five tabs, switch to side navigation or a dropdown.
Do not use tabs when switching discards the current edit state — users will assume the content is still there.
Similar Patterns
Don't mix these upTabsCurrent
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
In one line:Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
How to tell AI
Three levels of promptAdd the component name and specifics
Add tabs to the user profile page: Profile / Posts / Likes. Tapping a tab swaps the content below, and the active tab gets an underline indicator.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few buttons at the top to switch the stuff below.
Say this instead
Add tabs to the profile page — Profile / Posts / Likes — with a bottom indicator on the active tab and the URL query synced on switch.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.