Components
Breadcrumb
Breadcrumb flattens shadcn's Breadcrumb markup into a single items-driven component: each item describes a label and an optional href, instead of hand-writing nested BreadcrumbList / BreadcrumbItem / BreadcrumbLink / BreadcrumbSeparator structures. The last item becomes the current page automatically, and long trails can collapse into an ellipsis.
Installation
With the @easy-shadcn namespace configured:
pnpm dlx shadcn@latest add @easy-shadcn/breadcrumbOr install via the full URL (zero configuration):
pnpm dlx shadcn@latest add https://easy-shadcn.vercel.app/r/breadcrumb.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | - | Trail definitions — see the table below. |
separator | ReactNode | chevron | Overrides the content rendered between items. |
maxItems | number | - | Maximum items to display. When items.length exceeds it, the breadcrumb shows the first item, an ellipsis, and the last maxItems - 1 items. |
listClassName | string | - | Class override for BreadcrumbList. |
itemClassName | string | - | Class override applied to every BreadcrumbItem. |
linkClassName | string | - | Class override applied to every BreadcrumbLink. |
pageClassName | string | - | Class override for the current BreadcrumbPage. |
separatorClassName | string | - | Class override applied to every BreadcrumbSeparator. |
All other props (className, aria-label, etc.) are forwarded to the underlying nav.
BreadcrumbItem
| Field | Type | Description |
|---|---|---|
label | ReactNode | Item content. |
href | string | Renders a link. Omit it to render plain text. |
current | boolean | Forces this item to render as the current page. Defaults to the last item. |
Notes
- The current page is detected automatically: the last item renders as a non-interactive
BreadcrumbPage(aria-current="page"). Setcurrenton any item to override this — once any item is explicitlycurrent, the last item is no longer auto-selected. - The current page is never a link, even if it has an
href. - For client-side routing (Next.js
<Link>, React Router), pass the link element aslabeland omithref, or compose thecomponents/ui/breadcrumbprimitives directly. The flathrefrenders a plain<a>. itemsmust be homogeneous. For interactive ellipsis menus or per-item custom markup, compose the primitives directly instead.