Breadcrumbs 🔗

Indicate the current page's location within a navigational hierarchy.

Example 🔗

Use items array to create a breadcrumbs nav. active state of last element is automatically set if it is undefined.

<template>
  <breadcrumbs :items="items"/>
</template>
<script>
  export default {
    data () {
      return {
        items: [
          {text: 'Home', href: '#'},
          {text: 'Library', href: '#'},
          {text: 'Data', href: '#'}
        ]
      }
    }
  }
</script>
<!-- breadcrumbs-example.vue -->

Breadcrumb item 🔗

You can also use <breadcrumb-item> in breadcrumbs directly. This is useful while full control of item text is need (e.g. HTML tags).

Note that active state will not automatically set if using this mode.

<breadcrumbs>
  <breadcrumb-item href="#"><b>Home</b></breadcrumb-item>
  <breadcrumb-item href="#">Library</breadcrumb-item>
  <breadcrumb-item active>Data</breadcrumb-item>
</breadcrumbs>
<!-- breadcrumbs-item.vue -->

Router link 🔗

Parse to (String or Object) instead of href will create a router-link for the breadcrumb item, which you can use with Vue-Router.

<template>
  <breadcrumbs :items="items"/>
</template>
<script>
  export default {
    data () {
      return {
        items: [
          {text: 'Home', to: '/', exact: true},
          {text: 'Breadcrumbs', to: '/breadcrumbs'}
        ]
      }
    }
  }
</script>
<!-- breadcrumbs-router-link.vue -->

API Reference 🔗

Breadcrumbs 🔗

Props 🔗

Slots 🔗

BreadcrumbItem 🔗

Props 🔗

Slots 🔗