@itherotech/vue-breadcrumbs-component v0.1.2

@itherotech/vue-breadcrumbs-component

A Vue component to easily render breadcrumbs. This component is still under development, the goal is to support html anchor tags, vue-router, and inertia.js. At this time I have only tested this package with inertia.

Usage:

<div>
    <breadcrumbs 
        :breadcrumbs="breadcrumbs">
        <i slot="seperator" class="seperator fad fa-angle-double-right"></i>
    </breadcrumbs>
</div>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        {
          name: 'Dashboard',
          router: 'inertia',
          target: 'dashboard',
        },
        {
          name: this.$page.auth.user.name,
          router: 'inertia', // null, 'vue-router', or 'inertia'
          target: 'profile', // route name
          routeParams: this.$page.auth.user.id,
        },
        {
          name: 'Password Reset',
          last: true,
        },
      ],
    }
  },
}
</script>

An example of how to style the breadcrumbs with TailwindCSS

.breadcrumb-nav {
    @apply flex items-center text-xs;
}

@media (min-width: 768px) {
    .breadcrumb-nav {
        @apply text-base;
    }
}

.breadcrumb {
    @apply flex items-center mr-4;
}

.breadcrumb-link {
    @apply font-semibold select-none;

    &:hover, &:focus { @apply text-pink-500 }
}

.breadcrumb-active {
    @apply text-gray-700 select-none;
}

.seperator {
    @apply  ml-4 mt-1 text-teal-700;
}

Installation:

npm install @itherotech/vue-breadcrumbs-component --save

Register globally in your main.js

import Breadcrumbs from '@itherotech/vue-breadcrumbs-component'

Vue.use(Breadcrumbs)