Breadcrumb
面包屑导航
WebDesktop上手难度: 容易
当页面层级比较深时，顶部显示一串「首页 › 设置 › 隐私」，告诉用户「我现在在哪一层」。
Live Demo
真的可以点当前层级： 相册 / 2026 / IMG_0231
你刚才看到的这个：你在相册 App 里点开一张照片的「详细信息」，页面顶部出现：‹ 相册 › 2024 › IMG_0231。点「2024」就回到上一级，这就是 Breadcrumb。
它到底是什么
Breadcrumb 是一串可点击的层级路径。它不负责让用户跳到任意地方（那是导航菜单的活），它只回答一个问题：我现在在哪里、怎么退回上一层。
路径导航面包屑层级导航breadcrumb trail位置指示
Anatomy · 它由什么组成
Root / Home根节点
通常是首页或产品名
Ancestors祖先层级
中间各级，可点击回退
Current当前页
最后一段，不可点击
Separator分隔符
› / / / ›› 箭头
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 页面层级 ≥ 3 层 | 用 |
| 用户可能想退回上一层 | 用 |
| 内容型网站、后台管理系统 | 用 |
| 只有一层结构的 App（首页 → 详情） | 不用 |
| 移动端底部导航已经足够定位 | 视情况 |
层级只有一两层时，加面包屑只是噪音——直接给个返回按钮就够了。
移动端竖屏空间紧张时，它经常被顶栏的返回箭头替代。
Similar Patterns
别搞混一句话区分：当页面层级比较深时，顶部显示一串「首页 › 设置 › 隐私」，告诉用户「我现在在哪一层」。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在相册详情页顶部加 Breadcrumb：相册 › 2024 › IMG_0231。中间的「相册」「2024」可点击返回上级，最后一段当前页不可点击。
不要只对 AI 说
Bad → Better不要这样对 AI 说
在顶部加个返回上面的东西。
改成这样说
在详情页顶部加 Breadcrumb：相册 › 2024 › IMG_0231。中间层级可点击返回，当前页不可点击。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。