A breadcrumb trail that truncates long labels and folds the middle of deep paths into an ellipsis menu.
Set up SAML sign-in
Connect Okta, Entra ID or Google Workspace in about ten minutes.
npx shadcn@latest add https://hyperblur.dev/r/breadcrumbs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/breadcrumbs.tsx.
import { Breadcrumbs } from "@/components/hyperblur/breadcrumbs"
<Breadcrumbs homeIcon items={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs" }, { label: "Setup" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href?: string }[] | Trail from the root to the current page. The last item renders as the current page and is not a link. | |
| separator | "chevron" | "slash" | "chevron" | Glyph between items. |
| maxItems | number | 4 | Most items shown before the middle ones collapse into an ellipsis button that opens a small menu. Minimum 2. |
| maxLabelWidth | number | 160 | Widest a label can be in pixels before it truncates with an ellipsis. |
| homeIcon | boolean | false | Shows a home icon in place of the first label. The label stays as the accessible name. |
| accent | string | "#2f7bff" | Color of the focus rings. |