Breadcrumbs

Hierarchical trail to the current page — collapses long paths with an ellipsis.

Installation

npx nimbus-docs add breadcrumbs

yarn dlx nimbus-docs add breadcrumbs

pnpm dlx nimbus-docs add breadcrumbs

bunx nimbus-docs add breadcrumbs

Preview

<Breadcrumbs
items={[
  { label: "Home", href: "/" },
  { label: "Components", href: "/components" },
  { label: "Breadcrumbs", href: "/components/breadcrumbs" },
]}
/>

Examples

Long path

Past maxVisible, middle entries collapse to an ellipsis.

<Breadcrumbs
maxVisible={3}
items={[
  { label: "Docs", href: "/" },
  { label: "Reference", href: "/ref" },
  { label: "API", href: "/ref/api" },
  { label: "Payments", href: "/ref/api/payments" },
  { label: "Webhooks", href: "/ref/api/payments/webhooks" },
]}
/>

API reference

Every prop the component accepts, sourced from a single declaration.

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