导航类 · Breadcrumb
面包屑
面包屑是用户界面中的一种辅助导航,可以显示当前页面在层级架构中的位置,并能返回之前的页面。

代码演示

如何引入

基本用法

带图标的

支持标题只显示图标或者同时显示图标和文本。

尺寸

默认为 compact,设置属性为 false 可使图标和文字尺寸增加。

自定义的分隔符

默认为 /

截断逻辑

0.34.0 版本之后,当级别名字溢出设定宽度后省略截断。可以通过 showTooltip 属性设置相关参数。默认宽度150px,鼠标悬停时显示 Tooltip 完整显示级别名称。
当路径层级超过 4 个级别,则:第二层至倒数第三层省略,点击省略号展开显示全部级别;如果过长则自动换行。 在 v>=1.9.0 之后,可以通过 maxItemCount 来控制超过多少个级别进行折叠。

自定义省略号区域

组件内部提供了两种省略号区域渲染的类型,可通过 moreType 来设置,moreType 的可选值为 defaultpopover
如果想要为省略号区域自定义其他形式的渲染,则可以使用 renderMore() 方法。

路由对象

Breadcrumb 支持通过 routes 传入路由对象 route: { name, path, href, icon } 或字符串组成的数组。可以配合 renderItem 来渲染节点。通过这样实现的 Breadcrumb 同样会进行截断处理。
  • name 为展示的名称,不传入时为空字符串。当 route 为字符串时,默认将字符串设置为名称。
  • path 为路由路径
  • href 为链接目的地,挂载在 a 标签上。
  • icon 为标签的显示图标

API 参考

属性说明类型默认值版本
activeIndex受控使用,当前选择的导航序号-2.61.0
autoCollapse是否超出maxItemCount后自动折叠booleantrue1.9.0
className类名string-
compact显示尺寸,是否紧凑booleantrue
maxItemCount超出多少个进行自动折叠number41.9.0
moreType内置的...区域的渲染类型,可选值为 'default'、'popover'string'default'1.27.0
renderItem自定义链接函数,配合 routes 使用(Route: Route) => ReactNode-0.27.0
renderMore自定义...区域的渲染(restItem: ReactNode[]) => ReactNode-1.27.0
routesrouter 的路由信息,由路由对象或字符串组成的数组,路由对象格式参考: RouteArray<Route | string>-
separator自定义的分隔符ReactNode'/'
showTooltip是否展示 Tooltip 及相关配置: width,溢出宽度; ellipsisPos,截断方式,从中间/末尾截断; opts,透传给Tooltip的属性boolean | showToolTipProps{width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}0.34.0
style内联样式CSSProperties-
onClick单击事件(item: Route , e: Event) => void-0.27.0
属性说明类型默认值版本
href链接的目的地string-
icon标签的显示图标ReactNode-
onClick单击事件function(item: Route, e: Event)-0.27.0
separator分隔符,可以覆盖父级的分隔符ReactNode-1.16.0
noLink移除 hover 和 active 的样式booleanfalse1.16.0

Route

属性说明类型默认值版本
href链接目的地string-0.27.0
icon标签的显示图标ReactNode-
name路由名string-
path路由路径string-
v>=1.16.0 之后 Route 支持 Breadcrumb.Item 上的相应属性。

Accessibility

  • Breadcrumb 支持传入 aria-label 来表示该 Breadcrumb 作用
  • Breadcrumb 会对当前项设置 aria-current='page'

文案规范

  • 每个页面链接都应该很简短,并且清楚地反映它链接到的位置或链接的实体
  • 按句子大小写书写

设计变量