Breadcrumb | Components

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

Overview

<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: 'https://google.com'
  },
  {
    text: 'Posts',
    to: { name: 'home' }
  },
  {
    text: 'Another Story',
    active: true
  }
]

Refer to the Router support reference page for router-link specific props.

Manually placed items

You may also manually place individual <b-breadcrumb-item> child components in the default slot of the <b-breadcrumb> component, as an alternative to using the items prop, for greater control over the content of each item:

<template>
  <b-breadcrumb>
    <b-breadcrumb-item href="#home">
      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
      Home
    </b-breadcrumb-item>
    <b-breadcrumb-item href="#foo">Foo</b-breadcrumb-item>
    <b-breadcrumb-item href="#bar">Bar</b-breadcrumb-item>
    <b-breadcrumb-item active>Baz</b-breadcrumb-item>
  </b-breadcrumb>
</template>

<!-- b-breadcrumb-item.vue -->

Remember to set the active prop on the last item.

<b-breadcrumb-item> also supports the various <router-link> props such as to, etc.

Component reference

Functional component

View source

<b-breadcrumb> Properties

Property	Type	Default	Description
`items`	`Array`	`null`	Array of breadcrumb items to render

Functional component

View source

<b-breadcrumb-item> Properties
<b-breadcrumb-item> Events

Property (Click to sort Ascending)	Type	Default	Description
`href`	`String`	`null`	Denotes the target URL of the link for standard a links
`rel`	`String`	`null`	Sets the 'rel' attribute on the rendered link
`target`	`String`	`'_self'`	Sets the 'target' attribute on the rendered link
`active`	`Boolean`	`false`	When set to 'true', places the component in the active state with active styling
`disabled`	`Boolean`	`false`	When set to 'true', disables the component's functionality and places it in a disabled state
`to`	`String` or `Object`	`null`	router-link prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object
`append`	`Boolean`	`false`	router-link prop: Setting append prop always appends the relative path to the current path
`replace`	`Boolean`	`false`	router-link prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record
`event`	`String` or `Array`	`'click'`	router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default
`active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'
`exact`	`Boolean`	`false`	router-link prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route
`exact-active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'
`router-tag`	`String`	`'a'`	router-link prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value
`no-prefetch`	`Boolean`	`false`	nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'no-prefetch' will disabled this feature for the specific link
`text`	`String`	`null`	Text to render in the breadcrumb item
`html`	`String`	`null`	HTML string to render in the breadcrumb item. Use with caution
`aria-current`	`String`	`'location'`	Sets the value of the 'aria-current' attribute (when the item is the active item). Supported string values are 'location', 'page', or 'true'

<b-breadcrumb-item> supports generating <router-link> or <nuxt-link> component (if using Nuxt.js). For more details on the router link (or nuxt link) specific props, see the Router support reference section.

Event	Arguments	Description
`click`	`event` - Native click event object	Emitted when clicked

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-breadcrumb>`	`BBreadcrumb`	`bootstrap-vue`
`<b-breadcrumb-item>`	`BBreadcrumbItem`	`bootstrap-vue`

Example:

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

Importing as a Vue.js plugin

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

Named Export	Import Path
`BreadcrumbPlugin`	`bootstrap-vue`