Navigation breadcrumb trails with customizable separators and link handling.
npx shadcn@latest add @preskok/breadcrumbsimport {
Breadcrumbs,
BreadcrumbsItem,
} from "@/components/ui/preskok-ui/breadcrumbs"
export function BreadcrumbsDemo() {
return (
<Breadcrumbs>
<BreadcrumbsItem href="/">Home</BreadcrumbsItem>
<BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
<BreadcrumbsItem href="/products/electronics">
Electronics
</BreadcrumbsItem>
<BreadcrumbsItem>Laptop</BreadcrumbsItem>
</Breadcrumbs>
)
}The root breadcrumbs container.
| Prop | Type | Default | Description |
|---|---|---|---|
separator | "chevron" | "slash" | boolean | "chevron" | Separator type between items |
className | string | - | Additional CSS classes |
Individual breadcrumb items.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Link URL (optional) |
separator | "chevron" | "slash" | boolean | true | Override separator for this item |
className | string | - | Additional CSS classes |