Breadcrumb
breadcrumb展示当前页面在层级中的位置，并标出当前页
用法
基础用法
传入 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>接客户端路由（render 插槽）
render 把该项真渲染成你给的元素（next/link、react-router 的 Link），皮肤与 aria-current 合并进去——不是劫持点击，所以 Cmd+点击开新标签、中键这些原生行为照常。
tsx
<Breadcrumb
items={[
{ label: "客户", render: <Link href="/customers" /> },
{ label: "张三" }, // 当前页不传 render 即保持不可点
]}
/>何时用
表达当前页在站点层级中的位置（首页 / 组件 / 面包屑），并提供逐级回退链接。同层内容互斥切换用 Tabs；翻页用 Pagination；有序流程用 Stepper。
导入
ts
import { Breadcrumb } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items* | BreadcrumbItem[] | - | 路径项数组，从根到当前页自左向右 |
BreadcrumbItem
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| label * | ReactNode | - | 显示内容 |
| href | string | - | 链接地址；省略则该项不可点（当前页或不可导航的祖先） |
| current | boolean | - | 显式标记为当前页；缺省时数组末项即当前页 |
| render | ReactElement | - | 渲染为自定义元素（next/link、react-router 的 Link…），皮肤类名与 aria-current 合并进该元素，label 作它的子节点 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| separator | ReactNode | 分隔符，默认 "/"，可换 chevron 等（装饰位自动 aria-hidden） |
禁忌 / 坑
- 中间项省略
href即渲染为不可点的纯文本（如「归档」这类无独立页面的祖先）。 - SPA 里别用裸
href：那是整页刷新。走render传框架的Link，它真的被渲染出来（不是在<nav>上劫持点击），所以 Cmd+点击开新标签、中键、Shift 开新窗这些原生行为不用自己一条条放行。 - 传了
render的项以它为准：即使该项是当前页也仍渲染为该元素，只是带上aria-current="page"——想保留「当前页不可点」就别给末项传render。href由该元素自带；若该项同时写了href，以该项的为准。 - 类名合并顺序同库内其它
render：本组件皮肤在前、render元素自带的className在后（后者胜出）。
相关
Playground
<Breadcrumb items={items} />