Breadcrumb
基础导航基于 Bootstrap 5 的面包屑组件，用于指示当前页面在导航层级中的位置，支持链接、激活状态、自定义分隔符与无障碍标签
Component Demo
Basic usage and examples of the Breadcrumb component
基础用法
条目之间的分隔符由 Bootstrap CSS 自动添加，无需手写分隔元素；最后一个条目通常使用 active 标记当前页面
链接用法
设置 href 时条目内部渲染 a 链接；active 条目渲染为纯文本并设置 aria-current="page"
自定义分隔符
divider 会自动写入 --bs-breadcrumb-divider CSS 变量；需要 SVG 图标等复杂分隔符时，可通过 style 直接设置该变量
路由集成
使用 react-router 等路由库时，可直接将 Link 作为条目内容，点击后使用客户端路由跳转
自定义结构与标签
label 设置导航的无障碍名称，listAs 可替换列表容器元素（默认 ol）
API Documentation
Complete API reference for the Breadcrumb component
Props
Breadcrumb
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
as | ElementType | 'nav' | 根元素标签，默认渲染 `nav` 并自动设置无障碍标签 |
divider | string | - | 自定义分隔符，自动写入 `--bs-breadcrumb-divider` CSS 变量，替换默认的 `/` |
label | string | 'breadcrumb' | 根元素的 `aria-label` 无障碍标签，用于描述导航类型 |
listAs | ElementType | 'ol' | 列表容器元素标签，对应渲染 `breadcrumb` 类的元素 |
listProps | OlHTMLAttributes<HTMLOListElement> | - | 透传给列表容器（默认 `ol`）的原生属性 |
BreadcrumbItem
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
active | boolean | false | 激活状态，渲染 `active` 类并设置 `aria-current="page"`，同时忽略 `href` 渲染为纯文本 |
as | ElementType | 'li' | 渲染的元素标签 |
href | string | - | 链接地址，非激活状态下在内部渲染 `a` 标签 |
Common Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | ReactNode | - | 面包屑内容 |
className | string | - | 自定义类名 |
...rest | HTMLAttributes | - | 透传原生元素属性（如 `onClick`、`style` 等） |
Type Definitions
BreadcrumbItemProps
面包屑条目组件属性接口
export interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {
active?: boolean;
as?: ElementType;
children?: ReactNode;
className?: string;
href?: string;
}BreadcrumbProps
面包屑容器组件属性接口
export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
as?: ElementType;
children?: ReactNode;
className?: string;
divider?: string;
label?: string;
listAs?: ElementType;
listProps?: OlHTMLAttributes<HTMLOListElement>;
}