npm i @velkin/react
import { VuBreadcrumb } from "@velkin/react/breadcrumb";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | string | "/" | Glyph between items; forwarded via `--breadcrumb-separator`. Default: `"/"`. |
| size | VuBreadcrumbSize | "md" | Typography scale forwarded to children. Default: `"md"`. |
| max | number | 0 | Collapse threshold; `0` never collapses by count. Default: `0`. |
| itemsBefore | number | 1 | Leading items kept when collapsed; HTML attribute is `itemsbefore`. Default: `1`. |
| itemsAfter | number | 1 | Trailing items kept when collapsed; HTML attribute is `itemsafter`. Default: `1`. |
| responsive | boolean | false | Auto-collapse when the trail no longer fits. Default: `false`. |
| overflow | VuBreadcrumbOverflow | "menu" | Hidden-segment UI (`menu` | `inline`). Default: `"menu"`. |
| expanded | boolean | false | Suspends collapse and reveals every item. Default: `false`. |
| showExpandAction | boolean | true | Footer action to reveal the full trail when `overflow="menu"`. Default: `true`. |
| expandActionLabel | string | "" | Footer action label; empty uses the locale catalog. |
| disabled | boolean | false | Dims the trail and disables pointer events. Default: `false`. |
| label | string | "" | Accessible name for the wrapping `<nav>`. Default: `"Breadcrumb"`. |
| Event | Detail | Description |
|---|---|---|
| vu-reveal | VuBreadcrumbRevealDetail | Fired when the full trail is revealed (`overflow="inline"` ellipsis click, or "Show full trail" in the menu). |
| Slot | Description |
|---|---|
| — | - One or more `<vu-breadcrumb-item>` children, in hierarchy order (root → leaf). |
| Part | Description |
|---|---|
| base | The `<nav>` wrapper. |
| list | The `role="list"` container holding items + ellipsis. |
| ellipsis | The `<li>` housing the overflow trigger; only present while collapsed. |
| ellipsis-separator | The leading separator inside the ellipsis tile. |
| ellipsis-button | The clickable button that opens the overflow menu or expands inline. |
| overflow-menu | The popover panel listing hidden segments (`overflow="menu"` only). |
| overflow-item | Each row button inside the overflow menu. |
| overflow-divider | Separator before the optional expand footer. |
| overflow-expand | Footer button that sets `expanded` to show the full trail. |
| Name | Definition |
|---|---|
| VuBreadcrumbOverflow | |
| VuBreadcrumbSize | |