<template>
  <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
    <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
      <li class="breadcrumb-item">
        <router-link to="/">
          <template>
            <i class="fa fa-home"></i>
          </template>
        </router-link>
      </li>
      <template v-for="(item, index) in link">
        <li v-if="item.active" :key="index" class="breadcrumb-item">
          <a :href="item.path">{{ item.name }}</a>
        </li>
        <li
          v-else
          :key="index"
          class="breadcrumb-item active"
          aria-current="page"
        >
          {{ item.name }}
        </li>
      </template>
    </ol>
  </nav>
</template>
<script>
export default {
  name: "breadcrumb",
  props: {
    link: {
      type: Array
    }
  }
};
</script>
<style></style>
