Crumb

The breadcrumb is an easy-to-use element to keep track of the path the user has navigated. Each item should have the crumb class, and you can use the additional crumbs class to wrap all crumb elements:

<div class="crumbs has-mb-none">
    <a href="#" class="crumb">Home</a>
    <a href="#" class="crumb">About</a>
    <a href="#" class="crumb">Contact</a>
</div>

We provide an is-active modifier to mark a crumb as active, for example to inform the user about the current page.

<div class="crumbs has-mb-none">
    <a href="#" class="crumb">Home</a>
    <a href="#" class="crumb">About</a>
    <a href="#" class="crumb is-active">Contact us</a>
</div>

Customize

The crumb element will apply the styles defined in the links.crumb field of your theme configuration.

export default {
    links:{
        crumb: {
            color: "black",
        },
    },
    // ...other configuration
};