Properties
Property | Type | Default Value |
---|---|---|
items | Array |
Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through
::before
andcontent
.
<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
}
]
<b-breadcrumb>
Property | Type | Default Value |
---|---|---|
items | Array |
.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>
Property | Type | Default Value |
---|---|---|
href | String | |
rel | String | |
target | String | _self |
active | Boolean | false |
active-class | String | active |
append | Boolean | false |
disabled | Boolean | false |
event | String or Array | click |
exact | Boolean | false |
exact-active-class | String | active |
replace | Boolean | false |
router-tag | String | a |
to | String or Object | |
text | String | |
aria-current | String | location |
<b-breadcrumb-link>
Property | Type | Default Value |
---|---|---|
href | String | # |
rel | String | |
target | String | _self |
active | Boolean | false |
active-class | String | active |
append | Boolean | false |
disabled | Boolean | false |
event | String or Array | click |
exact | Boolean | false |
exact-active-class | String | active |
replace | Boolean | false |
router-tag | String | a |
to | String or Object | |
text | String | |
aria-current | String | location |
Component | Import 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);
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);