适用:页面层级结构超过 3 级的情况
不适用:页面层级不超过 2 级的情况
面包屑记录的是页面的结果逻辑,而非用户的操作顺序
当前页面即为面包屑的最后一级
避免将非页面级的内容写到面包屑中,比如 Tabs 的切换,Trees 的层级,等等。
允许从当前位置返回到层次结构中任一父级
面包屑的每一个层级允许同级间平行切换
面包屑不允许折行,但每一级的名称允许...
面包屑最多出现四级,当超过四级时,只显示第一级和最后两级,中间部分用「···」代替
当前页面
路径
显示当前页面之上的页面路径
完整路径超过 5 层时,默认收起,点击后查看所有路径
允许增加 icon
返回上一页(可选)
分割线
当前页不可再次点击
任意路径均可点击,点击后直接前往目标页面
面包屑任意结点均可搭配下拉菜单,拓展应用场景
通过点击任意路径结点,即可快速返回父级页面
当中间路径被折叠时,点击「...」查看所有被折叠的路径,点击之后立即跳转至目标页面
点击左边的「返回」则立即退回上一个页面,效果同浏览器返回。
面包屑通常位于页面或模块的左上角,与内容左对齐。