Breadcrumbs
A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.
Viewing /billing
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/breadcrumbs.json"Usage
tsx
import { Breadcrumbs } from "@/components/godui/breadcrumbs";tsx
const items = [
{ label: "Home", href: "/" },
{ label: "Library", href: "/library" },
{ label: "Current" },
];
<Breadcrumbs items={items} onNavigate={router.push} />;Hovering crumbs slides a shared pill; the last crumb is marked as the current page.
Examples
Collapsed overflow
Pass maxItems to fold the middle into a … button that springs open into a popover.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Crumbs: { label, href?, icon? } |
maxItems | number | 0 | Collapse the middle past this count (0 = never) |
separator | ReactNode | chevron | Node rendered between crumbs |
collapsible | boolean | true | Allow the collapsed middle to expand |
onNavigate | (href: string) => void | — | Called on crumb click (prevents default) |