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>

<!-- b-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.

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

Breadcrumb Component Reference

<b-breadcrumb>

Properties

PropertyTypeDefault Value
itemsArray

<b-breadcrumb-item>

Properties

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

Events

EventArgumentsDescription
click
Native click event object
Emitted when clicked

Importing individual Breadcrumb Components

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

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)