Navigation

Breadcrumb

Server Component

Hierarchical page trail.

Import

tsx

import { Breadcrumb } from "@cooud-ui/ui";

bash

npx cooud-ui add breadcrumb

Examples

Trail

Shows the path to the current page, with the active page as plain text.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Generated from the component's exported types.

BreadcrumbLinkProps

Extends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	—