# 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".


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.


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