Indicate the current page’s location depth using a navigation list that automatically adds separators using CSS.
Separators are automatically added in CSS through
content. You can change the separator by changing the
$breadcrumb-divider Sass variable.
You can generate and bind breadcrumbs from your JS data using a combination of
v-bind as follows:
You're able to use the
size modifier to control the text and spacing size of your breadcrumb, using one of the available sizes:
lg. The default size is set to
Here you can find a list of the various customization options you can use for the breadcrumb components as props, as well as available slots.
Here you can find a list of the Sass variables you can use for the breadcrumb components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.