<template>
  <div class="breadcrumb d-flex flex-nowrap">
    <div class="item" v-for="(item,index) in breadcrumbList" :key="index">
      <a :href="item.href"><h5 class="color-666 d-inline-block font-size-16">{{ item.title }}</h5><span v-if="index != listLength" class="mx-1 color-666">/</span></a>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

  let breadcrumbList = ref<any>(
      [
        {href:'/',title:'Home'},
        {href:'/',title:'Case Detail'}
      ]
  )
  let listLength = ref<number>(0)

  onMounted(async ()=>{
    listLength.value = breadcrumbList.value.length - 1
  })
</script>

<style scoped lang="less">
.breadcrumb{
  .item:hover h5{
    color: #fa8106;
  }
}
</style>