Skip to main content

Breadcrumb 面包屑

用于定位页面在层次结构内的位置,并根据需要可以返回上级页面。


组件构成

  1. 文字标签:用以表示页面名称,文字标签可替换为图标
  2. 分隔符:用以分隔每级页面,默认为 /

基础面包屑

广泛的基础用法,系统拥有超过两级以上的层级结构,用于切换向上任意层级的内容。

如果标题长度超过「12个字符」或者「160px」时,出现省略号。

文本标题可以用「图标」来替代,也可以「图标」+「文本」。

交互规则

默认情况下,父级页面均可为点击跳转链接。当鼠标悬浮于父级页面标题时高亮显示「#8C8C8C → #262626」,并且底部出现悬停背景色「#F5F5F5」,继续点击则跳转至该页面。

当鼠标悬浮于带省略的标题时,用tooltip展示全部的内容。