Breadcrumbs

当前页面的层级路径导航 — 路径过长时用省略号折叠中间项。

安装

npx @cloudflare/nimbus-docs add breadcrumbs

yarn dlx @cloudflare/nimbus-docs add breadcrumbs

pnpm dlx @cloudflare/nimbus-docs add breadcrumbs

bunx @cloudflare/nimbus-docs add breadcrumbs

预览

<Breadcrumbs
items={[
  { label: "首页", href: "/" },
  { label: "组件", href: "/components" },
  { label: "面包屑", href: "/components/breadcrumbs" },
]}
/>

示例

长路径

超过 maxVisible 后，中间条目会折叠为省略号。

<Breadcrumbs
maxVisible={3}
items={[
  { label: "文档", href: "/" },
  { label: "参考", href: "/ref" },
  { label: "API", href: "/ref/api" },
  { label: "支付", href: "/ref/api/payments" },
  { label: "Webhook", href: "/ref/api/payments/webhooks" },
]}
/>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`items`required	`Array<{ label: string; href: string }>`
`maxVisible`	`number`