A breadcrumb trail that folds its middle into a menu when it runs out of room. The fold is decided from the real widths of every level, separator and the menu button, measured again whenever the container resizes, so the trail always fits on one line: the first level and the current page stay in view, the nearest parents stay beside them, and the levels in between collapse behind a small button that lists them in order. Long labels are cut with an ellipsis and keep their full text as a tooltip. Levels render as real links through your own router, or as buttons, with a chevron or slash separator and an optional home icon.
The import and the props worth knowing about, in one place.
import { NavBreadcrumb } from "@/components/beste/component/nav-breadcrumb";
// Links through your router, a house icon on the first level
<NavBreadcrumb
homeIcon
items={[
{ label: "Home", href: "/" },
{ label: "Artists", href: "/artists" },
{ label: "Robert Glasper", href: "/artists/glasper" },
{ label: "Black Radio III" },
]}
renderLink={(props) => <Link {...props} />}
/>
// Buttons driven by your own state, slash separators, a filled trail
<NavBreadcrumb
items={path}
onNavigate={(item, index) => setPath(path.slice(0, index + 1))}
separator="slash"
tone="muted"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Move through the levels in order, including the button that holds the folded ones. |
|---|---|
| Enter / Space on the button | Open the menu of folded levels. |
| Up / Down in the menu | Move between the folded levels; Enter follows one, Escape closes the menu. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
items* | BreadcrumbItem[] | — | The path from the top level down to the current page, which is the last item. |
getHref | (item: BreadcrumbItem, index: number) => string | — | Address for each level. Without it, and without `href` on an item, levels render as buttons that call `onNavigate`. |
renderLink | (props: BreadcrumbLinkProps) => React.ReactNode | — | Render the links through your router, e.g. `(props) => <Link {...props} />`. |
onNavigate | (item: BreadcrumbItem, index: number) => void | — | Called when a level is chosen, from the trail or from the menu of hidden levels. |
separator | "chevron" | "slash" | "chevron" | |
homeIcon | boolean | — | A house icon on the first level when it has none of its own. |
maxItemWidth | number | 180 | Widest a single level may grow before its label is cut with an ellipsis, in pixels. |
tone | "muted" | "outline" | "ghost" | "ghost" | |
size | "sm" | "default" | "lg" | "default" | |
labels | Partial<typeof DEFAULT_LABELS> | — | Words used by the component, for translation. |
aria-label | string | "Breadcrumb" | |
className | string | — |