Displays the location of the current page within a navigational hierarchy. It improves the navigation experience


Use the items in order to programatically generate the breadcrumb links.


Use the color directive like for any other component that supports it to customize the breadcrumbs links color.


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.


A default Vue slot that can be used instead of passing in an array of object. This allows for greater control of the breadcrumbs


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