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
<b-breadcrumb> Slots

All property default values are globally configurable.

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

Name	Description
`default`	Content (breadcrumb items) to place in the breadcrumb

Functional component

View source

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

All property default values are globally configurable.

Property (Click to sort Ascending)	Type (Click to sort Ascending)	Default	Description
`active`	`Boolean`	`false`	When set to `true`, places the component in the active state with active styling
`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'
`append`	`Boolean`	`false`	<router-link> prop: Setting append prop always appends the relative path to the current path
`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'
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`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'
`href`	`String`		<b-link> prop: Denotes the target URL of the link for standard a links
`html` Use with caution	`String`		HTML string to render in the breadcrumb item
`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
`prefetch` v2.15.0+	`Boolean`	`null`	<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 `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
`rel`	`String`	`null`	<b-link> prop: Sets the `rel` attribute on the rendered link
`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
`router-component-name` v2.15.0+	`String`		<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only `<router-link>` specific props are passed to the component)
`target`	`String`	`'_self'`	<b-link> prop: Sets the `target` attribute on the rendered link
`text`	`String`		Text to render in the breadcrumb item
`to`	`Object` or `String`		<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

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

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

Name	Description
`default`	Content to place in the breadcrumb item

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`

Example:

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

Overview

Breadcrumb items

Manually placed items

Component reference

Properties

Slots

Properties

Slots

Events

Importing individual components

Importing as a Vue.js plugin