2.9 KiB
Breadcrumb
:::tip
Breadcrumb can be used with embedded BreadcrumbItem.
:::
Demos
Stylistic variants
Available style variants for the ui prop: strong.
Size variants
Available size variants for the ui prop: s / m.
Using inline BreadcrumbItems
Can be used with embedded BreadcrumbItems.
Using datasource
Can be used with the routes prop as well.
Customizable separators
Separators can be customized.
Events mode
Handling redirect event instead of redirect with router.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
ui |
string= |
- | [^ui] |
routes |
Array<Object> |
[] |
[^routes] |
^^^ui Style variants.
+++Enum values
| Value | Description |
|---|---|
s |
Small. |
m |
Medium. |
| +++ | |
| ^^^ |
^^^routes
The datasource for breadcrumb items. The type of items is {label: string, type: string, to: string | Object=, native: boolean=}. Properties apart from label can be referred to the props of BreadcrumbItem component.
:::warning The last item will always be displayed as plain text by default. ::: ^^^
Slots
| Name | Description |
|---|---|
default |
The items of the breadcrumb. Can only have BreadcrumbItem components as direct children. The routes prop will be ignored when this slot is specified. |
item |
[^slot-item] |
separator |
[^slot-separator] |
^^^slot-item
The content of each breadcrumb item. Default to the label properties of each item within routes, or the default slot content of BreadcrumbItem components.
+++Scope properties
| Name | Type | Description |
|---|---|---|
route |
Object |
The item in routes. Custom properties will also be passes into the scope object. |
| +++ | ||
| ^^^ |
^^^slot-separator Separator between adjacent breadcrumb items. Displays a globally configured icon by default.
:::warning
When using Vue.js version 2.5.17 and below, it's required to bind a slot-scope.
:::
^^^^
Events
| Name | Description |
|---|---|
redirect |
[^redirect] |
^^^redirect
Triggered when clicking the item with type value link. The callback parameter list is (event, route, index).
+++Parameters
| Name | Type | Description |
|---|---|---|
event |
Event | Native click event object. |
route |
Object |
The corresponding route item in routes. |
index |
number |
The index of the clicked item. |
| +++ | ||
| ^^^ |