willaengine/resources/js/Global/components/Misc/Breadcrumbs.vue

<template>
    <v-breadcrumbs :items="items">
        <template v-slot:divider>
            <v-icon>WMi-left-open</v-icon>
        </template>
        <template v-slot:item="props">
            <router-link :to="{name: props.item.routeName}" class="WM-Link WM-Margin-T-5" :class="[LinkClass, props.item.disabled && 'disabled']"><v-icon>WMi-{{ props.item.icon }}</v-icon> {{ props.item.text.toUpperCase() }}</router-link>
        </template>
    </v-breadcrumbs>
</template>

<script>
export default {
    props: {
        LinkClass:      { default: 'WM-Link-Red' },
        items:          { default: [] },
    },
};
</script>
<style scoped lang="scss">
    .WM-Link .v-icon{
        margin-bottom: 3px;
        margin-left: 5px;
    }
    .disabled {
        color: grey;
        pointer-events: none
    }
    .v-breadcrumbs li:nth-child(2n) {
        padding: 0 12px 0 30px;
    }
    .v-breadcrumbs .WM-Link {
        font-size: 14px;
    }
    .router-link-exact-active.router-link-active.WM-Link-Cyan .v-icon {
        color: #32c5d2;
    }

</style>