跳到正文
GitHub

导航

Breadcrumb

你在哪,画成一条路径。

示例

default

说明

你在哪,画成一条路径。

最后一节是带 aria-current="page" 的纯文字,而不是指向自己的链接——自链接是面包屑最常见的 bug,它让读屏软件提供一个哪儿也去不了的跳转。

分隔符放在 <li aria-hidden> 里,所以这条路径被读作它的各个节点,而不是“首页 斜杠 作品 斜杠”。

属性

Breadcrumb props
属性类型默认值说明
items必填Crumb[]
labelstring'Breadcrumb'当一个页面上有不止一条路径时,用它来命名这一条。
separatorReactNode'/'渲染在各节点之间。默认是一条斜杠;不管用什么,它都只是装饰。

同时接受 HTMLAttributes<HTMLElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 最后一节是带 aria-current="page" 的文字,永远不是指向自己的链接。
  • 分隔符是 aria-hidden 的,所以这条路径不会被念成“首页 斜杠 作品 斜杠”。