Collapsing Breadcrumb
Pagination
Source and install need .
pnpm dlx shadcn@latest add @assembli/breadcrumbBreadcrumb
The everyday breadcrumb: icons, chevron or slash separators, aria-current on the current page and router-friendly links. It measures itself and folds middle crumbs into a "…" menu, listed as an indented path, until the trail fits, then truncates the last label if it has to. Crumbs with siblings get a switcher beside them, so the trail doubles as a team, project or branch picker.
Props
Other props pass through to the root element.
items*
BreadcrumbItem[]
separator
"chevron" | "slash"
Default
"chevron"size
"sm" | "md"
Default
"md"collapse
"auto" | "never" | number
Default
"auto""auto"folds middle crumbs into a "…" menu until the trail fits its container,"never"lets it wrap, and a number keeps that many crumbs at most (the first one plus the last ones).renderLink
(props: BreadcrumbLinkProps) => React.ReactElement
Default
defaultLinkRender links with your router, e.g.
(props) => <Link {...props} />.onSiblingSelect
(item: BreadcrumbItem, sibling: BreadcrumbSibling) => void
Called when a sibling without an
hrefis picked.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | BreadcrumbItem[] | – | |
| separator | "chevron" | "slash" | "chevron" | |
| size | "sm" | "md" | "md" | |
| collapse | "auto" | "never" | number | "auto" | "auto" folds middle crumbs into a "…" menu until the trail fits its container, "never" lets it wrap, and a number keeps that many crumbs at most (the first one plus the last ones). |
| renderLink | (props: BreadcrumbLinkProps) => React.ReactElement | defaultLink | Render links with your router, e.g. (props) => <Link {...props} />. |
| onSiblingSelect | (item: BreadcrumbItem, sibling: BreadcrumbSibling) => void | – | Called when a sibling without an href is picked. |
