Indicate the current page's location within a navigational hierarchy.
Use items
array to create a breadcrumbs nav. active
state of last element is automatically set if it is undefined.
<template>
<breadcrumbs :items="items"/>
</template>
<script>
export default {
data () {
return {
items: [
{text: 'Home', href: '#'},
{text: 'Library', href: '#'},
{text: 'Data', href: '#'}
]
}
}
}
</script>
<!-- breadcrumbs-example.vue -->
You can also use <breadcrumb-item>
in breadcrumbs directly. This is useful while full control of item text is need (e.g. HTML tags).
Note that active
state will not automatically set if using this mode.
<breadcrumbs>
<breadcrumb-item href="#"><b>Home</b></breadcrumb-item>
<breadcrumb-item href="#">Library</breadcrumb-item>
<breadcrumb-item active>Data</breadcrumb-item>
</breadcrumbs>
<!-- breadcrumbs-item.vue -->
Parse to
(String or Object) instead of href
will create a router-link
for the breadcrumb item, which you can use with Vue-Router.
<template>
<breadcrumbs :items="items"/>
</template>
<script>
export default {
data () {
return {
items: [
{text: 'Home', to: '/', exact: true},
{text: 'Breadcrumbs', to: '/breadcrumbs'}
]
}
}
}
</script>
<!-- breadcrumbs-router-link.vue -->
Name | Type | Default | Required | Description |
---|---|---|---|---|
items |
Array | Breadcrumb items to create. Props defined in each item object is the same with BreadcrumbItem.vue, except text will be replace as the breadcrumb item body. |
Name | Description |
---|---|
default |
The breadcrumbs body. |
Name | Type | Default | Required | Description |
---|---|---|---|---|
active |
Boolean | false | Set item to active state. | |
href |
String | An native link will be created if this prop present. | ||
target |
String | Native link prop. | ||
to |
String or Object | An Vue-Router link will be created if this prop present. | ||
replace |
Boolean | false | Vue-Router link prop. | |
append |
Boolean | false | Vue-Router link prop. | |
exact |
Boolean | false | Vue-Router link prop. |
Name | Description |
---|---|
default |
The breadcrumb item body. |