跳到主要内容

Breadcrumb 面包屑

告诉人“我在哪”，并能一步回到上面的任何一级。层级有三层以上时才值得放；它是辅助导航，不代替主导航。

基本用法

items 按从外到内的顺序给出路径，最后一项是当前页，不是链接。窄于 520px 时自动只留首尾，中间折成一个“…”按钮，点开后露出全部。

总是折叠

路径很深时用 maxItems：项数超过它，任何宽度下都折叠中间项。点“…”展开后焦点会落到第一个露出来的中间项上。

按钮项与自定义分隔符

条目只有 onClick 没有 href 时渲染成按钮（用于不改变地址的场合）；两者都没有就是纯文字。separator 换掉默认的箭头。

接口

Breadcrumb

属性类型默认值说明
items*BreadcrumbItem[]—路径，最后一项是当前页。
labelstring'面包屑'导航地标的名字。
maxItemsnumber—超过这个数量时任何宽度下都折叠中间项。默认只在窄屏（< 520px）折叠。
separatorReactNode—分隔符，默认右箭头。

BreadcrumbItem

属性类型默认值说明
label*ReactNode—文字。
hrefstring—链接地址。
onClick(e: MouseEvent) => void—点击时。没有 href 时条目渲染成按钮。

无障碍

  • 外层是 nav 地标（名字默认“面包屑”），里面是有序列表 ol；最后一项带 aria-current="page"。
  • 分隔符是装饰，对读屏隐藏，不会被读成“大于号”。
  • 各级是普通的链接或按钮：Tab 依次聚焦，Enter 触发（按钮还有空格）。
  • 折叠按钮的名字是“显示中间的 N 级路径”，带 aria-expanded；展开后按钮消失，焦点自动移到第一个露出来的中间项，不会丢。
  • 被折叠的中间项对读屏和键盘同样隐藏，展开前不会 Tab 到。