导航
Breadcrumb
你在哪,画成一条路径。
示例
default
说明
你在哪,画成一条路径。
最后一节是带 aria-current="page" 的纯文字,而不是指向自己的链接——自链接是面包屑最常见的 bug,它让读屏软件提供一个哪儿也去不了的跳转。
分隔符放在 <li aria-hidden> 里,所以这条路径被读作它的各个节点,而不是“首页 斜杠 作品 斜杠”。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | Crumb[] | — | |
| label | string | 'Breadcrumb' | 当一个页面上有不止一条路径时,用它来命名这一条。 |
| separator | ReactNode | '/' | 渲染在各节点之间。默认是一条斜杠;不管用什么,它都只是装饰。 |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
无障碍
- 最后一节是带 aria-current="page" 的文字,永远不是指向自己的链接。
- 分隔符是 aria-hidden 的,所以这条路径不会被念成“首页 斜杠 作品 斜杠”。