Shell breadcrumbs
Route-based breadcrumb trail for the app shell. Parses usePathname() and maps path segments to human-readable labels via a consumer-provided resolveLabel function, or accepts an explicit segments override.
Installation
First install? Complete the one-time host setup.
Live preview
A route-based breadcrumb trail from Next.js usePathname(), or an explicit segments list. Switch Depth to see shallow, deep, and ellipsis-collapsed trails.
Loading preview…
Built with Breadcrumb.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | BreadcrumbSegment[] | — | Explicit segment list. When provided `resolveLabel` and `usePathname` are bypassed. Each segment has a `label` string and an optional `href`. |
| resolveLabel | (segment: string, fullPath: string) => string | null | Promise<string | null> | — | Consumer-provided label resolver for dynamic path segments. Return `null` to fall back to the capitalized raw segment. May be async (e.g. entity name fetch). |
| maxVisible | number | 4 | Maximum number of crumbs shown before collapsing the middle ones with an ellipsis. Click the ellipsis to expand. |
| showHome | boolean | true | Prepend a home icon crumb as the first item. |
| homeHref | string | '/' | Href for the home icon crumb. |
| messages | ShellBreadcrumbsMessageOverrides | — | Override any UI copy — `homeAriaLabel`, `ellipsisAriaLabel`, `navAriaLabel`, and per-code `errors`. |
| onError | (err: unknown) => void | — | Fires when an async `resolveLabel` call throws. The segment falls back to the capitalized raw value. |
| className | string | — | Extra class names on the root `<nav>` element. |
Messages
copy
| Key | Default copy |
|---|---|
| homeAriaLabel | Home |
| ellipsisAriaLabel | Show more breadcrumbs |
| navAriaLabel | Breadcrumb |
errors
| Code | Default copy |
|---|---|
| UNKNOWN_ERROR | Something went wrong. Please try again. |