Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

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

Separators are automatically added in CSS through ::before and content .

  • Home 
<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>
Show Code

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

<route-bread-crumb/>
Slot Description
default Default content for the breadcrumb
Slot Description
default Default content for the breadcrumb item

← Buttons →