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 #

NameTypeParametersDescriptiondefault
itemsArray[ "title", "url", "disabled", "active" ]The items that will construct the breadcrumbfalse
separatorStringSeparator dividing the breadcrumb links/
colorStringChange the color of the breadcrumb links
alignString[ "left", "center", "right" ]Align the breadcrumb to the left, center or right.left
slotString[ "left", "center", "right" ]Used instead of passing in an array of object into 'items'false