面包屑

面包屑说明一个页面所处的位置。最后一项就是当前页面：它以纯文本呈现，并标上 aria-current="page"，因为指向你已经在看的页面的链接只是噪音。

基础面包屑

breadcrumbs({
  items: [
    { label: '首页', href: '/' },
    { label: '文档', href: '/docs' },
    { label: '路由' },
  ],
})

分隔符

任意字符串或标记。无论用哪个，分隔符对屏幕阅读器都是隐藏的。

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: '首页', href: '/' }, { label: 'UI', href: '/ui' }, { label: '面包屑' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: '首页', href: '/' }, { label: 'UI', href: '/ui' }, { label: '面包屑' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: '首页', href: '/' }, { label: 'UI', href: '/ui' }, { label: '面包屑' }],
  }),
)

纯字符串

没有 href 的项就只是文字，出现在哪里都一样——不只是最后一项。

breadcrumbs({
  items: ['首页', '归档', '2026', '三月'],
})

由路径生成

在静态站点里，这条路径通常是从路由推导出来的，而不是手写的。

return (() => {
  const path = '/docs/guides/routing'
  const segments = path.split('/').filter(Boolean)

  return breadcrumbs({
    items: [
      { label: '首页', href: '/' },
      ...segments.map((segment, index) => ({
        label: segment.replace(/-/g, ' '),
        href: index === segments.length - 1 ? undefined : '/' + segments.slice(0, index + 1).join('/'),
      })),
    ],
  })
})()

给 nav 命名

整块是一个带无障碍名称的 <nav>，屏幕阅读器可以直接跳到这里。当一个页面有不止一个导航地标时，用 label 改掉这个名称。

breadcrumbs({
  label: '文档面包屑',
  items: [{ label: '文档', href: '/docs' }, { label: '组件' }],
})

属性

属性	类型	默认值	说明
`items`	`Array`	`[]`	字符串，或 { label, href } 对象。最后一项是当前页面。
`separator`	`Child`	`'/'`	画在各项之间，对屏幕阅读器隐藏。
`label`	`string`	`'Breadcrumb'`	nav 地标的无障碍名称。