Breadcrumb
Breadcrumb shows where you are in a hierarchy and lets you jump back to parent levels.
The last item is the current page: semibold text, aria-current="page", not clickable. Three sizes: small, medium, large. Pass items + maxDisplayedItems to collapse the middle items into a “…” menu automatically.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Size & icon
small, large; the icon goes on the root item.
Collapsing middle items
items + maxDisplayedItems: items beyond the limit go into a “…” menu.
Usage
Do
- Place the Breadcrumb at the top of the page, above the title.
- Collapse the middle items when the path is long; always keep the root and the current item.
- Make each item's label match the title of the page it leads to.
Don't
- Don't use Breadcrumb in place of the main navigation.
- Don't make the current item clickable.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"small" | "medium" | "large" | Default: "medium" | Height 24 / 32 / 40px. |
| items{ key?, label, href?, onClick?, icon? }[] | Default: — | Data mode: dividers are inserted automatically and the last item is the current page. |
| maxDisplayedItemsnumber | Default: — | Maximum number of visible items (with items); the middle ones go into the “…” menu. The menu's code loads on demand, right after the “…” button appears. |
| overflowIndexnumber | Default: 1 | Number of leading items kept before the “…” button. |
| BreadcrumbButton | Default: — | Current page: semibold, aria-current="page", not clickable. |
| BreadcrumbButton | Default: — | With href it renders an <a>, without it a <button>; asChild for router links. |
| aria-labelstring | Default: "Breadcrumb" | Label of the <nav> element. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.breadcrumb
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| labelstring aria-label mặc định của thẻ <nav>. | Default (English)"Breadcrumb" | messagesVi"Đường dẫn điều hướng" |
| overflowstring aria-label của nút "…" (BreadcrumbOverflow). | Default (English)"More items" | messagesVi"Hiện thêm mục" |