面包屑Breadcrumb
页面导航显示当前页面在网站层级中的位置
面包屑把首页、上级分类和当前页面依次列出来，帮助用户理解路径并返回上层。上级通常可以点击，当前页只用于说明位置，不需要再次链接自己。
什么时候用
- 站点有多级层级，需要标明当前页的位置首页/组件/导航/面包屑
- 用户想快速回到上一级，点链接直接跳组件库/导航/面包屑点「导航」直接回上一层
- 文件目录、商品分类这类树状结构云盘/设计组/2026 改版/首页.sketch
- 深层页面配合 导航菜单 Menu，多深都不怕迷路工作台/项目/官网改版/任务/详情
什么时候不用
- 页面只有一两层 → 看个标题就够了首页/设置
- 表示操作步骤 → 用 步骤条 Steps填写信息/确认订单/完成支付这是步骤，不是路径
- 路径太长不收缩，一行放不下全摊开首页/产品/企业版/解决方案/零售行业/客户案例/案例详情七级不收缩，一行放不下
- 当前页做成可点击链接，点了原地打转首页/面包屑当前页还能点？点了原地不动
组成结构 · Anatomy
1上级链接Link可以点，点了跳回对应层级
2分隔符Separator一般是 / 或 ›，只起视觉分隔
3当前页Current纯文本不可点，就是用户所在的这一页
常见变体 · Variants
基础用法Basic
三级以内的常规层级,默认就用它
带图标With Icon
想让「首页」更显眼,给首级加图标
自定义分隔符Separator
想贴合品牌风格,把 / 换成别的符号
典型使用场景
