Breadcrumb
breadcrumb面包屑 · 纯皮肤静态 + aria-current 当前页语义
用法
基础用法
传入 items 数组（从根到当前页），末项默认作为当前页且不可点。
tsx
<Breadcrumb
items={[
{ label: "首页", href: "/" },
{ label: "组件", href: "/components" },
{ label: "面包屑" },
]}
/>自定义分隔符
separator 接受任意 ReactNode（字符或图标），默认 "/"，分隔符自动加 aria-hidden。
tsx
<Breadcrumb items={items} separator={<ChevronIcon />} />不可点的中间项
省略某项的 href 即渲染为中性纯文本（不可导航的祖先），仍非当前页。
tsx
<Breadcrumb
items={[
{ label: "首页", href: "/" },
{ label: "归档" },
{ label: "2026 年报" },
]}
/>长路径自动换行
项数较多时在窄容器内自动换行，配合 chevron 分隔符更清晰。
tsx
<div className="max-w-xs">
<Breadcrumb items={longPath} separator={<ChevronIcon />} />
</div>何时用
表达当前页在站点层级中的位置（首页 / 组件 / 面包屑），并提供逐级回退链接。同层内容互斥切换用 Tabs；翻页用 Pagination；有序流程用 Stepper。
导入
ts
import { Breadcrumb } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items* | BreadcrumbItem[] | — | 路径项数组，从根到当前页自左向右 |
BreadcrumbItem：{ label: ReactNode; href?: string; current?: boolean }。href 省略则该项不可点（当前页或不可导航的祖先）；current 显式标记当前页，缺省时数组末项即当前页。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| separator | ReactNode | 分隔符，默认 "/"，可换 chevron 等（装饰位自动 aria-hidden） |
禁忌 / 坑
暂无已知坑。注意中间项省略 href 即渲染为不可点的纯文本（如「归档」这类无独立页面的祖先）。
相关
Playground
<Breadcrumb items={items} />