Breadcrumbs

Installation

Included in the starter. Every new site has it in src/components/ui/breadcrumbs/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add breadcrumbs

yarn nimbus-docs add breadcrumbs

pnpm nimbus-docs add breadcrumbs

bunx @cloudflare/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: "API reference", href: "/api-reference" },
  { label: "OpenAPI", href: "/api-reference/openapi" },
  { label: "Setup", href: "/api-reference/openapi/setup" },
  { label: "Install with the recipe", href: "/api-reference/openapi/setup#install-with-the-recipe" },
]}
/>

API reference

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