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

适用范围

何时使用：

• 页面层级结构 ≥2 级时使用，允许从当前位置通过点击面包屑路径返回到任一上级；

何时不使用：

• 一级页面，如首页、各模块的根目录；
• 如果需要引导用户执行多步骤流程，请改用 Step 步骤。

通用原则：

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

构成解析

结构

面包屑有路径与分隔符组成：

• 路径 Path：

  • 显示当前页面之上的页面路径；
  • 完整路径超过 5 层时省略中间路径，只显示第一级和最后两级，中间部分用「···」代替，点击后查看所有路径，详见下文的查看省略路径；
  • 允许为路径添加图标，尺寸16×16px，满足个性化的定制需求，但默认不加；
  • 不允许折行，但每一级的名称允许出现「…」；
  • 当前页文字颜色变量为 $wh-color-text-regular ，非当前页文字颜色变量为 $wh-color-text-secondary ；

• 分隔符 Separator：

  • 用以分隔每级页面，允许替换为其他具有表达分割意思的元素，如右箭头，默认分隔符为“/”；

间距

交互行为

返回任一父级

• 当前页不可点击；
• 除当前页外，任意路径均可点击，点击后直接前往目标页面；
• 通过点击任意路径节点，即可快速返回父级页面；

页面跳转逻辑

系统间页面跳转存在着两种跳转逻辑：

• 线性跳转，用户从 A 页面一层层的进入到它的子页面，用户通过点击面包屑路径返回到任一上级，即如 A3 能返回至 A2 或A1 或 A；
• 平行跳转，不同模块之间的页面存在关联，用户能从 A 页面的子页面跳转到 B 页面的子页面，比如用户从 A 模块的 A1 页面跳到 B 模块的 B1 页面后，此时用户可通过点击面包屑的路径返回到 B，点击页头标题左侧的返回图标，可返回到 A1；

查看省略路径

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

布局

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