Breadcrumb

Indicate the current page’s location depth using a navigation list that automatically adds separators using CSS.

Examples

Separators are automatically added in CSS through ::before and content. You can change the separator by changing the $breadcrumb-separator Sass variable.

Breadcrumbs Example

Dynamically Generated

You can generate and bind breadcrumbs from your JS data using a combination of v-for and v-bind as follows:

Dynamically Generated Breadcrumbs

Sizes

You're able to use the size modifier to control the text and spacing size of your breadcrumb, using one of the available sizes: sm, md, and lg. The default size is set to md.

Breadcrumbs Sizes

API

Breadcrumb API <i-breadcrumb>
Property Description Type Accepted Default
size Sets the size of the breadcrumb component. String sm, md, lg md
Breadcrumb Item API <i-breadcrumb-item>
Property Description Type Accepted Default
active Sets the breadcrumb item component as active. Boolean true, false false
size Sets the size of the breadcrumb item component. String sm, md, lg md
href Treats the breadcrumb item component as an anchor. String
to Treats the breadcrumb item component as a router-link. Object