Breadcrumb

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

Default

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

Color

Use the vs-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 vs-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 vs-align to either align the breadcrumb to the left, center or right.

API #

NameTypeParametersDescriptiondefault
vs-itemsArray[ "title", "url", "disabled", "active" ]The items that will construct the breadcrumbfalse
vs-separatorStringSeparator dividing the breadcrumb links/
vs-colorStringChange the color of the breadcrumb links
vs-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 'vs-items'false