Breadcrumb

Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.

<template>
  <b-breadcrumb :items="items"/>
</template>

<script>
export default {
  data () {
    return {
      items: [{
        text: 'Admin',
        href: '#'
      }, {
        text: 'Manage',
        href: '#'
      }, {
        text: 'Library',
        active: true
      }]
    }
  }
}
</script>

<!-- breadcrumb.vue -->

Items are rendered using :items prop. It can be an array of objects to provide link and active state. Links can be href's for anchor tags, or to's for router-links. Active state of last element is automatically set if it is undefined.

items = [
  {
    text: 'Home',
    href: 'http://google.com',
  }, {
    text: 'Posts',
    to: { name: 'home' },
  }, {
    text: 'Another Story',
    active: true
  }
]

Component Reference

<b-breadcrumb>

Properties

PropertyTypeDefault Value
itemsArray
Trying to get native browser events working on your component? Use the .native modifier to capture browser native events such as: @click.native="...", @mouseover.native="...", etc. See the the official Vue.js documentation for more information.

<b-breadcrumb-item>

Properties

PropertyTypeDefault Value
hrefString
relString
targetString_self
activeBooleanfalse
active-classStringactive
appendBooleanfalse
disabledBooleanfalse
eventString or Arrayclick
exactBooleanfalse
exact-active-classStringactive
replaceBooleanfalse
router-tagStringa
toString or Object
textString
aria-currentStringlocation

<b-breadcrumb-link>

Properties

PropertyTypeDefault Value
hrefString#
relString
targetString_self
activeBooleanfalse
active-classStringactive
appendBooleanfalse
disabledBooleanfalse
eventString or Arrayclick
exactBooleanfalse
exact-active-classStringactive
replaceBooleanfalse
router-tagStringa
toString or Object
textString
aria-currentStringlocation

Importing Individual Components

ComponentImport Path
<b-breadcrumb>bootstrap-vue/es/components/breadcrumb/breadcrumb
<b-breadcrumb-item>bootstrap-vue/es/components/breadcrumb/breadcrumb-item
<b-breadcrumb-link>bootstrap-vue/es/components/breadcrumb/breadcrumb-link

Example:

import bBreadcrumb from 'bootstrap-vue/es/components/breadcrumb/breadcrumb';
Vue.component('b-breadcrumb', bBreadcrumb);

Importing Breadcrumb as a Vue plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

import { Breadcrumb } from 'bootstrap-vue/es/components';
Vue.use(Breadcrumb);