Breadcrumb 面包屑

面包屑是界面中的一种辅助导航，告诉用户当前页面所在的位置及页面层级关系，方便用户快速返回上一级或去往其他层级的页面。

用法

系统页面层级结构超过 2 级时使用，页面层级不超过 2 级的情况不建议使用。

如果您要引导用户执行多步骤流程，请改用Step 步骤。

通用原则

• 面包屑始终被视为辅助导航，并且永远不应完全替代主要导航。
• 面包屑记录的是页面的结果逻辑，而非用户的操作顺序
• 当前页面即为面包屑的最后一级
• 避免将非页面级的内容写到面包屑中，比如 Tabs 的切换，Trees 的层级，等等。
• 允许从当前位置返回到层次结构中任一父级
• 面包屑的每一个层级允许同级间平行切换

格式

构成

1. 当前页面
   • 允许增加 icon
2. 路径
   • 显示当前页面之上的页面路径
   • 完整路径超过 5 层时，默认收起，点击后查看所有路径
   • 允许增加 icon
3. 返回上一页（可选）
   • 返回上一个页面，效果同浏览器返回
4. 分割线
   • 分割面包屑和返回按钮

样式

位置

• 面包屑通常位于全局导航之下，页面或模块内容之上，并与内容左对齐。
• 当用户浏览不同页面时，面包屑的位置不应移动。

内容

• 面包屑不允许折行，但每一级的名称允许…
• 面包屑最多出现 5 级，当超过 5 级时，只显示第一级和最后两级，中间部分用「···」代替

行为

• 当前页不可再次点击
• 任意路径均可点击，点击后直接前往目标页面
• 面包屑任意结点均可搭配下拉菜单，拓展应用场景

返回父级

• 通过点击任意路径结点，即可快速返回父级页面
• 当中间路径被折叠时，点击「…」查看所有被折叠的路径，点击之后立即跳转至目标页面

返回上一页

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

<ol class="breadcrumb">
  <li class="goBackBtn"><a href="#">返回</a></li>
  <li><a href="#">一级</a></li>
  <li><a href="#">二级</a></li>
  <li class="active">当前页面</li>
</ol>