前端

面包屑Breadcrumb

你可能会说

页面层级太深了，顶上显示一下当前在哪，能点回上一层。

面包屑是按层级展示当前页面路径、帮助用户返回上级的导航组件“首页 / 项目 / 设置”可让用户看懂当前位置并返回项目页。上级通常可点击，当前页只说明位置，不需要链接到自己。
首页/ 组件/ 面包屑
组成结构 · Anatomy
组件 / 面包屑
可以点，点了跳回对应层级
一般是 / 或 ›，只起视觉分隔
纯文本不可点，就是用户所在的这一页
常见变体 · Variants
基础用法Basic
首页/组件/面包屑
存在清楚的多级信息层级，并需要返回上级时
带图标With Icon
🏠 首页/组件
首级入口需要与其他路径项区分时
自定义分隔符Separator
首页›组件
设计系统已定义路径分隔符样式时
典型使用场景
电商商品详情页
首页/数码影音/耳机/无线降噪耳机 Pro
🎧
声阔 Q45 头戴降噪耳机
¥ 899 ¥ 1,299
云盘文件目录
☁ 我的云盘/设计组/2026 官网改版
📁 01-需求文档12 个文件
📁 02-视觉稿8 个文件
🖼 首页-banner-v3.png2.4 MB
后台多级页面
工作台/用户管理/用户详情
林小布
ID 10247 · 注册于 2025-11-03
正常
累计订单
23 笔
最近登录
2 小时前
帮助中心文章页
帮助中心/账号与安全/如何重置登录密码
如何重置登录密码？
更新于 2026-06-18 · 约 3 分钟读完
👍 有帮助（214）　👎 没帮助（6）
延伸阅读 · 权威出处
面包屑模式WAI-ARIA APG ↗