适用：页面层级结构超过 3 级的情况

不适用：页面层级不超过 2 级的情况

通用原则

• 面包屑记录的是页面的结果逻辑，而非用户的操作顺序

• 当前页面即为面包屑的最后一级

• 避免将非页面级的内容写到面包屑中，比如 Tabs 的切换，Trees 的层级，等等。

• 允许从当前位置返回到层次结构中任一父级

• 面包屑的每一个层级允许同级间平行切换

• 面包屑不允许折行，但每一级的名称允许...

• 面包屑最多出现四级，当超过四级时，只显示第一级和最后两级，中间部分用「···」代替

构成

1. 当前页面

   1. 允许增加 icon

2. 路径

   1. 显示当前页面之上的页面路径

   2. 完整路径超过 5 层时，默认收起，点击后查看所有路径

   3. 允许增加 icon

3. 返回上一页（可选）

   1. 返回上一个页面，效果同浏览器返回

4. 分割线

   1. 分割面包屑和返回按钮

行为

• 当前页不可再次点击

• 任意路径均可点击，点击后直接前往目标页面

• 面包屑任意结点均可搭配下拉菜单，拓展应用场景

返回父级

• 通过点击任意路径结点，即可快速返回父级页面

• 当中间路径被折叠时，点击「...」查看所有被折叠的路径，点击之后立即跳转至目标页面

返回上一页

点击左边的「返回」则立即退回上一个页面，效果同浏览器返回。

实践案例

---

样式

布局

面包屑通常位于页面或模块的左上角，与内容左对齐。