Where this page sits: a trail of links ending on the current page, folding its middle into a menu when long.
Breadcrumb is a nav landmark holding an ordered list of links. The last item is the current page: not a link, marked aria-current="page", in heading ink. Items may carry an icon (a home glyph on the first).
Past maxItems (default 4) the middle folds into an ellipsis Menu: the first item, the menu, then the last items, so the trail stays on one line. separator swaps the chevron for any node, "/" being the common alternative.
Installation
npx shadcn@latest add KezLahd/rime/breadcrumbAlso installs: base, icon, menu.
Usage
import { Breadcrumb } from "@/components/ui";
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Website relaunch" },
]}
/>Examples
Default
Long trail, folded
Slash separator
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Breadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsRequired | ReadonlyArray<BreadcrumbItem> | ||
| maxItems | number | 4 | Past this many items the middle folds into an ellipsis menu: the first item, the menu, then the last (maxItems - 2). Default 4. |
| separator | ReactNode | Between items. Defaults to a small chevron; "/" is the other common choice. | |
| aria-label | string | ||
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --breadcrumb-gap | 6px | … |
| --breadcrumb-size | var(--text-small) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --r-xs | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-subtle | tokens.css | … |
Accessibility
- A <nav aria-label="Breadcrumb"> wrapping an <ol>, so the count and order are announced.
- The current page is aria-current="page" and not a link; separators are hidden from assistive tech.
- The ellipsis is a Menu button named "Show n more" with keyboard support of its own.
Do and don't
Do
- Start from the section root, not from the site name, when the shell already shows the site.
Don't
- Don't use a breadcrumb as the only navigation.
- Don't link the current page to itself.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open breadcrumb.mdRelated: navigation-menu, page-header