Become a patron
Breadcrumb
Displays the location of the current page within a navigational hierarchy. It improves the navigation experience
Default
Use the items in order to programatically generate the breadcrumb links.
Color
Use the color directive like for any other component that supports it to customize the breadcrumbs links color.
Separator
You can change the separator dividing the links by either passing a string to the separator directive like so "•", "-", "|" etc..., or by passing in one of the material icons text "chevron_right".
WARNING
In order to differeciate a custom separator "•" from an icon "chevron_right", we verify the string length. If the length is greater than 1 it will be considered a material icon.
Slot
A default Vue slot that can be used instead of passing in an array of object. This allows for greater control of the breadcrumbs
Alignement
Use align to either align the breadcrumb to the left, center or right.
API #
| Name | Type | Parameters | Description | default |
|---|---|---|---|---|
| items | Array | [ "title", "url", "disabled", "active" ] | The items that will construct the breadcrumb | false |
| separator | String | Separator dividing the breadcrumb links | / | |
| color | String | Change the color of the breadcrumb links | ||
| align | String | [ "left", "center", "right" ] | Align the breadcrumb to the left, center or right. | left |
| slot | String | [ "left", "center", "right" ] | Used instead of passing in an array of object into 'items' | false |