docs_vue2/one/docs/en-US/components/breadcrumb.md

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.
+++
^^^