Nuxt Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS with Nuxt breadcrumb.
import {Breadcrumb, BreadcrumbItem} from '@/components'
Global usage
Vue.component(Breadcrumb.name, Breadcrumb)
Vue.component(BreadcrumbItem.name, BreadcrumbItem)
For local usage
export default {
components: {
Breadcrumb,
BreadcrumbItem
}
}
Example
<breadcrumb :transparent="false">
<breadcrumb-item active>
Home
</breadcrumb-item>
</breadcrumb>
<breadcrumb :transparent="false">
<breadcrumb-item>
<a href="#">Home</a>
</breadcrumb-item>
<breadcrumb-item active>
Library
</breadcrumb-item>
</breadcrumb>
<breadcrumb :transparent="false">
<breadcrumb-item>
<a href="#">Home</a>
</breadcrumb-item>
<breadcrumb-item >
<a href="#">Library</a>
</breadcrumb-item>
<breadcrumb-item active>
Data
</breadcrumb-item>
</breadcrumb>
Automatic breadcrumb
We also provide a route-bread-crumb
component which automatically generates breadcrumbs based on routes declared with Vue Router. The usage is quite simple
Props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
active | boolean | N/A | Whether breadcrumb item is active |
Slots
SLOT | DESCRIPTION |
---|---|
default | Default content for the breadcrumb |