Location trail with chevron, slash or dot separators, a home crumb and long middles collapsed into a menu; in button style a hover pill glides between crumbs.
breadcrumbsnavigationtrailpathhierarchy
Installation
$npx shadcn@latest add @geturui/breadcrumbs
Also installs: Popover
Usage
usage.tsx
1import Link from "next/link";
2import { Breadcrumbs } from "@/components/ui/breadcrumbs";
3
4export function DocsTrail() {
5 return (
6 <Breadcrumbs
7 home="/"
8 maxItems={4}
9 renderLink={({ href, children, ...rest }) => <Link href={href} {...rest}>{children}</Link>}
10 items={[
11 { label: "Docs", href: "/docs" },
12 { label: "Guides", href: "/docs/guides" },
13 { label: "Theming", href: "/docs/guides/theming" },
14 { label: "Tokens", href: "/docs/guides/theming/tokens" },
15 { label: "Migrating colour tokens" },
16 ]}
17 />
18 );
19}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | { label, href?, icon?, iconOnly?, onClick? }[] | — | Root to current page. The last item is the current page. |
separator | "chevron" | "slash" | "dot" | "chevron" | Glyph between crumbs. |
variant | "text" | "button" | "text" | Quiet links, or pill crumbs with a gliding hover highlight. |
home | boolean | string | — | Prepend an icon-only Home crumb linking to this href (true = "/"). |
maxItems | number | 5 | Collapse the middle into a … menu above this many crumbs. |
itemsBeforeCollapse / itemsAfterCollapse | number | 1 / 2 | Crumbs kept either side of the collapsed group. |
maxLabelWidth | number | 180 | Labels truncate past this width (px); long ones get a title tooltip. |
renderLink | (props) => ReactNode | — | Swap the anchor for your router's link. |
label | string | "Breadcrumb" | Accessible name of the nav landmark. |
Accessibility
- A nav landmark wraps an ordered list; separators are aria-hidden.
- The current page is plain text with aria-current="page".
- The … button says how many pages it hides and opens a popover menu; arrow keys move through it, Escape closes and returns focus.
- Icon-only crumbs keep their label as screen reader text.