Breadcrumbs 面包屑
导航面包屑，显示当前页面在层级结构中的位置
用法
import { Breadcrumbs } from '@lenso/ui';此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";
import { Breadcrumbs } from "@lenso/ui";
export function BreadcrumbsBasic() { return ( <Breadcrumbs> <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Electronics</Breadcrumbs.Item> <Breadcrumbs.Item>Laptop</Breadcrumbs.Item> </Breadcrumbs> );}export default BreadcrumbsBasic;Local adaptation source above. Derived from HeroUI v3.2.6 source.
组件结构
import { Breadcrumbs } from '@lenso/ui';
export default () => ( <Breadcrumbs> <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item> <Breadcrumbs.Item>Current Page</Breadcrumbs.Item> </Breadcrumbs>)示例
导航层级
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { BreadcrumbsLevel2 } from "./source";export { BreadcrumbsLevel2 as default } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { BreadcrumbsLevel3 } from "./source";export { BreadcrumbsLevel3 as default } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
禁用状态
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { BreadcrumbsDisabled } from "./source";export { BreadcrumbsDisabled as default } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义分隔符
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { BreadcrumbsCustomSeparator } from "./source";export { BreadcrumbsCustomSeparator as default } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
渲染函数
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { RenderFunction } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义样式
Tailwind CSS
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";export { CustomStyles } from "./source";Local adaptation source above. Derived from HeroUI v3.2.6 source.
全局 CSS
可使用 @layer components 指令自定义 Breadcrumbs 组件类。
了解更多。
@layer components { .breadcrumbs { @apply gap-4 text-lg; }
.breadcrumbs__link { @apply font-semibold; }
.breadcrumbs__separator { @apply text-blue-500; }}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
Breadcrumbs 组件使用以下 CSS 类（查看源码样式）：
基础类 [!toc]
.breadcrumbs- 面包屑根容器.breadcrumbs__item- 单个面包屑项包装器.breadcrumbs__link- 面包屑链接元素.breadcrumbs__separator- 项之间的分隔符图标
状态类 [!toc]
.breadcrumbs__link[data-current="true"]- 当前页指示（非链接）
交互状态
组件同时支持 CSS 伪类与 data 属性：
- Current：链接上的
[data-current="true"]（表示当前页） - Hover：链接元素支持标准 hover 状态
- Disabled：
isDisabled属性禁用所有链接
API 参考
Breadcrumbs
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
separator | ReactNode | chevron-right icon | 面包屑项之间的自定义分隔符 |
isDisabled | boolean | false | 是否禁用所有面包屑链接 |
className | string | - | 附加 CSS 类 |
children | ReactNode | - | 面包屑项 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined> | - | 使用自定义 render 函数覆盖默认 DOM 元素 |
Breadcrumbs.Item
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
href | string | - | 链接 URL（当前页可省略） |
className | string | - | 附加 CSS 类 |
children | ReactNode | RenderFunction | - | 项内容或 render 函数 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, BreadcrumbRenderProps> | - | 使用自定义 render 函数覆盖默认 DOM 元素 |
无障碍
Breadcrumbs 使用 React Aria Components 的 Breadcrumbs 原语，提供：
- 导航地标的正确 ARIA 属性
- 通过
aria-current="page"指示当前页 - 键盘导航支持
- 导航上下文的屏幕阅读器播报
最后一项（无 href）自动成为当前页指示。