Breadcrumb
面包屑导航
When the page hierarchy is deep, a trail like "Home › Settings › Privacy" sits at the top and answers "which level am I on?"
Live Demo
Actually clickableCurrent level: Photos / 2026 / IMG_0231
What you just saw:You open the details of a photo in a gallery app and the top of the page shows "‹ Albums › 2024 › IMG_0231". Tapping "2024" goes back up a level. That is a breadcrumb.
What it actually is
A breadcrumb is a clickable trail of ancestor levels. It is not meant for jumping anywhere — that is what a nav menu is for. It answers exactly one question: where am I, and how do I go back up one level?
Anatomy · What it's made of
Root / Home根节点
Usually the home page or the product name
Ancestors祖先层级
The levels in between, clickable to go back up
Current当前页
The last segment, not clickable
Separator分隔符
The › / / / ›› glyph between segments
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The page hierarchy is 3+ levels deep | Yes |
| Users may want to step back up a level | Yes |
| Content sites and admin dashboards | Yes |
| Apps with a single level of structure (home → detail) | No |
| Mobile bottom navigation already provides enough orientation | Depends |
With only one or two levels, a breadcrumb is just noise — a back button is enough.
On narrow mobile screens it is often replaced by the back arrow in the app bar.
Similar Patterns
Don't mix these upBreadcrumbCurrent
面包屑导航
When the page hierarchy is deep, a trail like "Home › Settings › Privacy" sits at the top and answers "which level am I on?"
Back Button
返回按钮
A left-pointing arrow that takes you back to wherever you just came from.
In one line:When the page hierarchy is deep, a trail like "Home › Settings › Privacy" sits at the top and answers "which level am I on?"
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
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.
Back Button
返回按钮
A left-pointing arrow that takes you back to wherever you just came from.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a breadcrumb at the top of the photo detail page: Albums › 2024 › IMG_0231. "Albums" and "2024" are clickable and go back up a level; the last segment is the current page and is not clickable.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something at the top to go back up.
Say this instead
Add a breadcrumb at the top of the detail page: Albums › 2024 › IMG_0231. Intermediate levels are clickable to go back up, the current page is not clickable.
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.