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>

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