Breadcrumb
Displays the current page path and allows quick navigation back to any previous page.
Showcase
The breadcrumb component supports dynamic level management and smart path collapsing.
Basic Usage
Use the to prop on YhBreadcrumbItem to define clickable navigation nodes.
Custom Separator
Customize the separator string with the separator prop.
Advanced Features
Smart Overflow Collapse
When the navigation hierarchy becomes deep, setting max-items collapses intermediate nodes into an ellipsis entry so the layout stays readable.
Router Adaptation
The component detects the Nuxt environment and can render route navigation through Nuxt-compatible links when to is provided.
Use in Nuxt
YhBreadcrumb works in Nuxt 3/4 after registering @yh-ui/nuxt.
API
Props
Breadcrumb
| Prop | Description | Type | Default |
|---|---|---|---|
| separator | Separator string | string | / |
| separator-icon | Separator icon component | string | Component | '' |
| max-items | Maximum number of displayed items before collapsing middle nodes | number | 0 |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Breadcrumb Item
| Prop | Description | Type | Default |
|---|---|---|---|
| to | Route navigation target | string | Record<string, unknown> | '' |
| replace | Whether to replace the current route | boolean | false |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Events
YhBreadcrumb and YhBreadcrumbItem do not expose component events.
Slots
Breadcrumb
| Slot | Description | Slot Props |
|---|---|---|
default | Breadcrumb content. | - |
Breadcrumb Item
| Slot | Description | Slot Props |
|---|---|---|
default | Breadcrumb item content. | - |
Expose
YhBreadcrumb and YhBreadcrumbItem do not expose public instance methods or properties.
Theme Variables
This component does not provide dedicated component-scoped theme variables. If you pass themeOverrides, the rendered styles still mainly consume shared global theme tokens such as text color and primary color.
Type Exports
| Name | Description |
|---|---|
YhBreadcrumbProps | Props type for YhBreadcrumb |
YhBreadcrumbSlots | Slots type for YhBreadcrumb |
YhBreadcrumbItemProps | Props type for YhBreadcrumbItem |
YhBreadcrumbItemSlots | Slots type for YhBreadcrumbItem |
YhBreadcrumbInstance | Public instance type for YhBreadcrumb |
YhBreadcrumbItemInstance | Public instance type for YhBreadcrumbItem |