This package is hosted on npm. You can install it using npm or yarn:
npm install vue-breadcrumbs-nav
# or
yarn add vue-breadcrumbs-nav
<template>
<vue-breadcrumbs-nav :data="data" v-model="activePath" />
</template>
<script lang="ts">
import { VueBreadcrumbsNav } from 'vue-breadcrumbs-nav'
import 'vue-breadcrumbs-nav/style.css'
import { ref } from 'vue'
const activePath = ref('recipes/breakfast/pancakes')
const data = {
"label": "Recipes",
"id": "recipes",
"children": [
{
"id": "breakfast",
"label": "Breakfast",
"children": [
{
"id": "pancakes",
"label": "Pancakes",
"children": [
{ "id": "classic-pancakes", "label": "Classic Pancakes" },
{ "id": "blueberry-pancakes", "label": "Blueberry Pancakes" }
]
}
]
}
]
}
</script>
.vbn
.vbn-crumb
.vbn-crumb--is-open
.vbn-crumb__label
.vbn-crumb__divider
.vbn-crumb__divider-icon
.vbn-dropdown
.vbn-dropdown__button
.vbn-dropdown__button--is-open
.vbn-dropdown__menu
.vbn-dropdown__menu-item
.vbn-dropdown__menu-item--active
MIT