面包屑Breadcrumb
你可能会说
页面层级太深了，顶上显示一下当前在哪，能点回上一层。
面包屑是按层级展示当前页面路径、帮助用户返回上级的导航组件“首页 / 项目 / 设置”可让用户看懂当前位置并返回项目页。上级通常可点击，当前页只说明位置，不需要链接到自己。
你可以这样告诉 AI Agent
请在数据报告页显示“项目 / 夏季活动 / 数据报告”面包屑。上级可以返回，当前页只表示位置，不要按访问历史生成。请从不同入口直接打开报告，确认路径仍然一致，窄屏不会挤出页面。
什么时候用
- 站点有多级层级，需要标明当前页的位置首页/组件/导航/面包屑
- 用户想快速回到上一级，点链接直接跳组件库/导航/面包屑点「导航」直接回上一层
- 文件目录、商品分类这类树状结构云盘/设计组/2026 改版/首页.sketch
- 深层页面配合 导航菜单 Menu，帮助用户确认当前位置工作台/项目/官网改版/任务/详情
什么时候不用
- 页面层级很浅：标题通常已足够说明位置首页/设置
- 表示操作步骤：使用 步骤条 Steps填写信息/确认订单/完成支付这是步骤，不是路径
- 路径太长不收缩，一行放不下全摊开首页/产品/企业版/解决方案/零售行业/客户案例/案例详情
- 当前页做成可点击链接，无法带来新的导航结果首页/面包屑当前页不应链接到自身
组成结构 · Anatomy
可以点，点了跳回对应层级
一般是 / 或 ›，只起视觉分隔
纯文本不可点，就是用户所在的这一页
常见变体 · Variants
基础用法Basic
存在清楚的多级信息层级，并需要返回上级时
带图标With Icon
首级入口需要与其他路径项区分时
自定义分隔符Separator
设计系统已定义路径分隔符样式时
典型使用场景
延伸阅读 · 权威出处
快速练习