<template>
  <div>
    <nav class="flex" aria-label="Breadcrumb">
      <ol class="flex items-center space-x-4">
        <li v-for="nav in navObject" v-bind:key="nav.label">
          <div class="flex items-center">
            <c-icon
              name="chevron-right" type="solid"
              class="flex-shrink-0 h-5 w-5 text-gray-400"
            ></c-icon>

            <a
              :href="nav.href"
              class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
              >{{nav.label}}</a
            >
          </div>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CBreadcrumbs",
  components: { CIcon },
  props: {
    navObject: {
      type: Array,
      required:true
    }
  }
};
</script>

<style></style>
