导航
Breadcrumb - 面包屑
你在哪，画成一条路径。
用法
import { Breadcrumb } from '@misoto22/folio'说明
你在哪，画成一条路径。
最后一节是带 aria-current="page" 的纯文字，而不是指向自己的链接——自链接是面包屑最常见的 bug，它让读屏软件提供一个哪儿也去不了的跳转。
分隔符放在 <li aria-hidden> 里，所以这条路径被读作它的各个节点，而不是“首页 斜杠 作品 斜杠”。
中间那一节如果没有 href，是一个双重看不见的缺陷：它会用和旁边链接相同的 --ink-3-aa 渲染成纯文字，而且也不带 aria-current——于是它被读成读者当前所在的那一页，而它并不是，浏览器和代码评审都不会吭一声。开发环境里控制台会。
结构
| 部件 | 说明 |
|---|---|
| 路径必填 | 一个由 label 命名的 <nav>，默认名是「Breadcrumb」。不管页面想不想再多一个地标，它就是一个地标；排版是 --ink-3-aa 上的 mono-meta。 |
| 列表必填 | 一个 <ol>——这个顺序是层级，不是读者的浏览历史。它是折行而不是截断，所以一条很深的路径是占到第二行，而不是丢掉一级。 |
| 路径链接 | 给每一个有 href、又不是最后一节的项渲染的 <a>。label 是 ReactNode，所以你往里放什么，什么就成了这个链接无障碍名称的一部分。 |
| 当前节必填 | 永远是最后一项：满色 --ink 的纯文字，带 aria-current="page"，无论有没有给它 href。 |
| 分隔符 | 默认是一条斜杠，装在两节之间自己那个 <li aria-hidden> 里。它的构造决定了它是装饰——永远不会成为被念出来的内容的一部分。 |
实践建议
推荐
- 一个页面可能同时装两条路径时，要传 label：否则两个 nav 地标的名字都是「Breadcrumb」，而同名的两个地标，就是读者无从选择的两个条目。
- 除最后一节外，每一节都要给 href——没有 href 的那一节会渲染成纯文字，颜色和旁边的链接一样，却既没有去处也没有 aria-current，于是它被读成读者正在看的那一页，而它并不是。开发环境会把那一节的名字点出来，而不是留下一处在浏览器里和评审里都看不见的遗漏。
- 这条路径要从当前页的上一级开始：只有一项的 Breadcrumb 会把那一项渲染成当前节，路径压根不存在——那是一个在宣告「一段长度为一的旅程」的地标。
避免
- 最后一项的 href 干脆别写，别传一个它根本不用的：不管你给它什么，最后一节都是文字——所以写在那里的 href 在评审时读起来像个链接，运行时却不是。
- 别为了省一行就在手机上把它藏了。恰恰是那种版式里，侧边栏躲在抽屉后面，这条路径才是屏幕上唯一一条能往上走一级的路。
示例
default
你在哪里，画成一条路径。最后一个面包屑是带着 aria-current="page" 的纯文本，绝不是一条指向自己的链接——自链接是最常见的面包屑 bug，它给读屏软件递上了一条哪儿也去不了的导航。分隔符坐在它们自己的 aria-hidden 列表项里，所以这条路径被读成它的各个条目，而不是「首页 斜杠 组件 斜杠」。label 为这个 nav 地标命名；一个能装下两条路径的页面必须给两条都命名，否则读者会拿到两个都叫 Breadcrumb 的条目，且无从选择。
a deep path
一条深到会换行的路径，配一个不是默认斜杠的分隔符。这份列表会换行而不是截断，而这是对的取舍：一条会截断的路径丢掉的那一级，通常正是读者要去的那一级。分隔符无论放什么进去都是装饰性的——它住在一个 aria-hidden 的列表项里，永远不会被念出来。别为了省一行就在手机上把它藏起来。手机恰恰是侧栏躲在抽屉后面的那种布局，而这让这条路径成了屏幕上唯一还在的、能往上走一级的途径。
page header
那条路径，就在它所终结的那个标题上方。要从当前页面的上一级开始写：一个只有一项的 Breadcrumb，会把那一项渲染成当前面包屑、并且完全没有路径，那是一个在宣告一段长度为一的旅程的地标。除最后一个之外，每个面包屑都需要 href——没有它的那一个会渲染成纯文本，颜色和旁边的链接一样，却既没有目的地、也没有 aria-current，于是它读起来像是读者当前所在的页面，而其实不是。最后一个面包屑和标题重复，不是一处需要修的重复：一个是路径，另一个是页面。
Invoice 2024-118
Issued 4 March, due 3 April. Unpaid.
无障碍
- 最后一节是带 aria-current="page" 的文字，永远不是指向自己的链接。
- 分隔符是 aria-hidden 的，所以这条路径不会被念成“首页 斜杠 作品 斜杠”。
- 中间某一节没有 href 时，它既不带 aria-current，也没有自己的颜色——所以这处遗漏是在开发环境里被报出来，而不是当作一节冒充当前页的路径发出去。