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"></b-breadcrumb>
</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
  }
]

Component reference

Properties

PropertyTypeDefault Value
items Array

<b-breadcrumb-item>

Functional Component

Properties

PropertyTypeDefault Value
href String
rel String
target String_self
active Booleanfalse
disabled Booleanfalse
to String or Object
append Booleanfalse
replace Booleanfalse
event String or Arrayclick
active-class String
exact Booleanfalse
exact-active-class String
router-tag Stringa
no-prefetch Booleanfalse
text String
html String
aria-current Stringlocation

Events

EventArgumentsDescription
click

Native click event object

Emitted when clicked

Importing individual components

CHANGED in 2.0.0-rc.22 You can import individual components into your project via the following named exports:

ComponentNamed ExportImport Path
<b-breadcrumb>BBreadcrumbbootstrap-vue
<b-breadcrumb-item>BBreadcrumbItembootstrap-vue

Example:

import { BBreadcrumb } from 'bootstrap-vue'
Vue.component('b-breadcrumb', BBreadcrumb)

Importing as a Vue.js plugin

CHANGED in 2.0.0-rc.22 Importing plugins has been simplified.

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

Named ExportImport Path
BreadcrumbPluginbootstrap-vue

Example:

import { BreadcrumbPlugin } from 'bootstrap-vue'
Vue.use(BreadcrumbPlugin)