Breadcrumb
A trail with automatic separators, a collapsed middle for deep paths, and a switcher for jumping to sibling workspaces.
Installation
npx shadcn@latest add @quireui/breadcrumbUsage
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink href="/invoices">Invoices</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbPage>INV-1042</BreadcrumbPage>
</BreadcrumbItem>
</Breadcrumb>Separators appear between items on their own, so there is nothing to place by hand. BreadcrumbLink takes a render for your router's link, like render={<Link href="/invoices" />}.
Switcher
BreadcrumbSwitcher is a level that is one of several, like a workspace or a project. It shows the current one with a small caret and opens a menu of its siblings, the current one checked. The breadcrumb becomes a way around as well as a way back, which is how most dashboards use their first crumb.
<BreadcrumbSwitcher label="Acme Studio" items={workspaces} current="acme" />Deep paths
BreadcrumbCollapsed folds the middle of a long path into a "…" that opens a menu of the levels it hides, so the trail stays on one line without losing the way back. Long names truncate and show in full on hover; the current page is the last to give way.
Accessibility
The trail is a nav landmark named "Breadcrumb", with the levels in an ordered list. The current page is marked aria-current="page", and the separators are hidden from screen readers. The collapsed menu says how many levels it holds.
| Key | Action |
|---|---|
| Tab | Moves through the links, the "…" and the switcher. |
| Enter | Follows a link, or opens the "…" or switcher menu. |
| ↑ / ↓ | Moves through an open menu. |
| Esc | Closes an open menu. |
Breadcrumb or something else?
- Moving between sections at the same level: Tabs.
- A long list split into pages: Pagination.
API reference
Breadcrumb
Where you are, and the way back up. Separators come between items on their own.
Also takes every <nav> attribute. Style it with [data-slot="breadcrumb"].
BreadcrumbItem
One level of the path.
Also takes every <li> attribute. Style it with [data-slot="breadcrumb-item"].
BreadcrumbLink
A level you can go back to. Long names truncate and show in full on hover.
Also takes every <a> attribute.
BreadcrumbPage
The page you are on. It is not a link, and screen readers hear it as the current page.
Also takes every <span> attribute. Style it with [data-slot="breadcrumb-page"].
BreadcrumbCollapsed
The middle of a deep path, folded into "…". It opens a menu of the levels it hides, so a long path stays on one line without losing the way back.
Prop
Type
BreadcrumbSwitcher
A level that is one of several, like a workspace or a project. It shows the current one and opens a menu to jump to a sibling, so the breadcrumb is a way around as well as a way back.
Prop
Type