AppBreadcrumb.vue

<template>
  <nav class="text-black font-bold mt-2" aria-label="Breadcrumb">
    <ol class="list-none p-0 inline-flex">
      <a
        v-if="back"
        class="group py-2 whitespace-nowrap flex items-center"
        href="#"
        :class="items.length && 'pr-4 border-r mr-4'"
        @click="$router.back()"
      >
        <fa icon="chevron-left" class="text-gray-300 mr-3 transition" />
        <span class="text-gray-400 group-hover:text-hover">
          {{ $t('goBack') }}
        </span>
      </a>

      <li v-for="(item, index) in items" :key="index" class="flex items-center">
        <nuxt-link
          :to="item.path"
          class="hover:text-hover py-2"
          :class="
            index !== items.length - 1
              ? 'text-gray-400'
              : 'text-gray-500 font-light select-all'
          "
        >
          {{ item.title }}
        </nuxt-link>
        <fa
          v-if="index !== items.length - 1"
          icon="chevron-right"
          class="text-gray-300 mx-3"
        />
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    back: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="postcss" scoped>
.group:hover >>> .fa-chevron-left {
  transform: translateX(-0.5em);
}
</style>