Breadcrumb 面包屑
显示当前页面在站点层级中的位置，并提供返回上级的路径。
使用概览
适合使用
- 内容层级较深，用户需要理解位置或快速返回祖先页面时。
不建议使用
- 站点只有一层导航，或流程步骤不代表信息架构层级时。
真实示例
组件文档路径
从文档首页定位到当前按钮页面。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/breadcrumb.json基础用法
导入
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@richardqiu/quartz/breadcrumb";JSX
<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/docs">文档</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>按钮</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>状态与控制摘要
默认
悬停
键盘焦点可见
已选择
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
aria-label | string | "Breadcrumb" | 为路径导航区域提供本地化的可访问名称。 |
组合结构
- 01
Breadcrumb - 02
BreadcrumbList - 03
BreadcrumbItem - 04
BreadcrumbLink - 05
BreadcrumbPage - 06
BreadcrumbSeparator - 07
BreadcrumbEllipsis
键盘约定
- Tab 按文档顺序访问真实链接，Enter 跳转；当前页与分隔符不可聚焦。
可访问性契约
- Breadcrumb 是具名导航地标，当前页使用 aria-current=page，分隔符从可访问性树隐藏。
- 折叠项需要本地化标签，路由链接必须保留 href、焦点与引用语义。