Preview
Design guidance
Use a breadcrumb for a hierarchy, with ancestors as links and the current page identified by aria-current="page". Breadcrumb.Trail applies a depth rule. The manual parts let your application choose another policy. Navigation, drafts, page actions and persistence remain caller-owned.
The default 10px size suits dense toolbars. Use 12px when the trail needs more prominence. Long labels keep their full accessible text and a native title. A title tooltip alone is insufficient for critical content on touch devices; show that name elsewhere in the page.
Installation
Install emoji-picker for the emoji example. Select, Combobox and Popover examples also import their named components.
Basic usage
sm is 10px. base is 12px.
Structures
Trail composes these parts from stable item IDs. Overflow composes Dropdown Menu and IconButton. Editable renders the shared Input; its caller owns draft and commit behavior. Use renderOverflow and renderCurrent for custom controls without replacing the navigation shell. Put interactive leading content inside Current, rather than its decorative icon prop.
Examples
With icon
Use a destination icon when it helps identify the location.
Custom separator
Long trail
Keep the full path with maxItems=0. Labels truncate inside the available space; native titles retain the full name.
Collapsed
Trail collapses above four levels by default. The root, parent and current page stay visible. The ellipsis opens the hidden ancestors in order.
Collapsed with Select
Use a flat Select when the hidden locations form a short list.
Collapsed hierarchy
Use nested Dropdown Menu parts when browsing successive parent levels matters.
Search hidden ancestors
Compose Combobox inside Popover to search a longer list.
Editable current page
The shared Input stays quiet at rest. Hover and focus show the field. The caller commits on Enter or blur and cancels with Escape.
Editable page with emoji
Keep the emoji trigger and name field as separate controls.
Search neighboring pages
The trailing action searches the current page and its siblings.
Select neighboring pages
Use Select for a short sibling list.
Current page actions
Rename in place, move to another parent, duplicate the page, or copy its link.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'base' | sm | 10px or12px. The size also sets icon geometry. |
aria-label | string | Breadcrumb | Navigation landmark name. |
children | ReactNode | Manual Link, Separator, Item and Current composition. Native nav attributes/ref are supported. |
| Prop | Type | Default | Description |
|---|---|---|---|
items | readonly BreadcrumbItemData[] | Stable id, label, optional icon and href. Provide an href for every ancestor; final item is current. | |
maxItems | number | 4 | Above this depth retain root and last two items.0 disables collapse. Invalid values use4. |
separator | ReactNode | Custom separator. | |
renderOverflow | (hiddenItems) => ReactNode | Replace the default Dropdown Menu composition. Item IDs and order are preserved. | |
renderCurrent | (item) => ReactNode | Render an editable or actionable current page inside Current. |
| Prop | Type | Default | Description |
|---|---|---|---|
Link | BreadcrumbLinkProps | href, render, decorative icon and native anchor attributes/ref. Plain Ghost Link with ghost hover feedback. | |
Current | BreadcrumbCurrentProps | Decorative icon, trailing action, children and native span attributes/ref; marks current page. | |
Item / Separator | native li props | Item hosts a custom control. Separator is hidden from assistive technology. Both forward native refs. | |
Overflow | BreadcrumbOverflowProps | Ordered items and optional aria-label; renders the canonical Dropdown Menu trigger and links. Place inside Item when composing manually. | |
Editable | InputProps | Required aria-label; native Input value, onValueChange, onBlur, onKeyDown and ref. Ghost at rest, subtle feedback on hover/focus. Caller handles validation and IME-aware commits. |