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" :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: '' },
        items:          { default: [] },
    },
};
</script>
<style scoped lang="scss">
    .WM-Link .v-icon{
        margin-bottom: 3px;
        margin-left: 1px;
    }
    .disabled {
        color: grey;
        pointer-events: none
    }
    .v-breadcrumbs li:nth-child(2n) {
        padding: 0 12px 0 30px;
    }
    .v-breadcrumbs .WM-Link {
        font-size: 14px;
    }
    .v-breadcrumbs a, .v-breadcrumbs a .v-icon::before {
        transition: 0.4s;
    }
    /*----------------------------------------------------*/
    /*                Colors                              */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .v-breadcrumbs.theme-#{$color} .router-link-active:hover {
            color: $value;
        }
        .v-breadcrumbs.theme-#{$color} .router-link-active::after {
            background: $value;
        }
        .v-breadcrumbs.theme-#{$color} .router-link-active:hover .v-icon::before {
            color: $value;
        }
        .v-breadcrumbs.theme-#{$color} .router-link-active.disabled {
            color: $value;
            border-bottom: 2px solid $value;
        }

    }


</style>