<template>
  <component
    :is="item.to ? 'router-link' : 'span'"
    :to="item.to"
    class="no-underline text-black opacity-40"
    :class="{ 'hover:opacity-100': item.to }"
  >
    {{ item.title }}
  </component>
</template>

<script>
export default {
  name: "BreadcrumbsItem",
  props: {
    item: { type: Object, require: true },
  },
};
</script>
