Breadcrumb 面包屑

告诉用户当前所在位置及页面层级关系,快速去往其他层级。

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

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

    通用原则

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

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

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

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

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

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

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

    构成

    1. 当前页面

      1. 允许增加 icon
    2. 路径

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

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

      3. 允许增加 icon

    3. 返回上一页(可选)

      1. 返回上一个页面,效果同浏览器返回
    4. 分割线

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

    行为

    • 当前页不可再次点击

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

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

    返回父级

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

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

    返回上一页

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

    实践案例


    样式

    布局

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