Overlays & navigation
Breadcrumb
A breadcrumb shows where the current page sits in the hierarchy and links back up it. Each level is a link, the current page is plain text, and long paths collapse their middle into a “…” menu so the trail fits on one line, even on a phone.
const path: BreadcrumbItem[] = [ { label: "Ledgerly", href: "#workspace", icon: <House strokeWidth={1.75} /> }, { label: "Clients", href: "#clients" }, { label: "Fernhill Studio", href: "#fernhill" }, { label: "INV-2041" },]; <Breadcrumb items={path} />Usage
components/ui/breadcrumb.tsx
import { Breadcrumb } from "@/components/ui/breadcrumb"; <Breadcrumb items={[ { label: "Clients", href: "/clients" }, { label: "Fernhill Studio", href: "/clients/fernhill" }, { label: "INV-2041" }, ]}/>Examples
Basic
The last item is the current page. Items can start with an icon.
const path: BreadcrumbItem[] = [ { label: "Ledgerly", href: "#workspace", icon: <House strokeWidth={1.75} /> }, { label: "Clients", href: "#clients" }, { label: "Fernhill Studio", href: "#fernhill" }, { label: "INV-2041" },]; <Breadcrumb items={path} />Separators
A chevron (default), a slash, or any node you pass.
<Breadcrumb items={path} separator="chevron" /><Breadcrumb items={path} separator="slash" /><Breadcrumb items={path} separator={<span className="size-1 rounded-full bg-line-strong" />} />Collapsed
With maxItems, paths longer than that keep the first item and the last two; the rest move into a menu. The menu is a full Dropdown menu, so it works with the keyboard.
const deep: BreadcrumbItem[] = [ { label: "Ledgerly", href: "#workspace", icon: <House strokeWidth={1.75} /> }, { label: "Reports", href: "#reports" }, { label: "2024", href: "#2024" }, { label: "Q3", href: "#q3" }, { label: "Tax", href: "#tax" }, { label: "VAT summary" },]; <Breadcrumb items={deep} maxItems={4} />Props
PropTypeDefaultDescription
itemsrequired{ label, href?, icon? }[]default: —From the top level down. The last item is the current page.separator"chevron" | "slash" | ReactNodedefault: "chevron"What goes between items. Hidden from screen readers.maxItemsnumberdefault: —Collapse the middle into a menu when there are more items than this.classNamestringdefault: —Classes for the nav element.
Accessibility
- Rendered as <nav aria-label="Breadcrumb"> with an ordered list, so screen readers announce the landmark and the number of levels.
- The current page has aria-current="page" and is not a link.
- Separators are presentational and hidden from assistive tech.
- The “…” button is labelled with how many levels it hides and opens a menu of links that supports arrow keys and Escape.