Skip to content
Breadcrumbs for Vue.js
Branch: master
Clone or download
Latest commit b34f6ac Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Docs on main site Apr 30, 2017
dist Version bump Dec 9, 2018
example Updates README to piint to live example, and update example to v-cloa… May 1, 2017
src Fixed default options Dec 9, 2018
.eslintrc Added actual readme and example May 14, 2016
.gitignore Vue 2.0 functionality Apr 29, 2017
.npmignore Added actual readme and example May 14, 2016
CHANGELOG.md Chanelog Dec 9, 2018
LICENSE
README.md Updates readme Dec 9, 2018
package.json 1.2.0 Dec 9, 2018

README.md

vue-breadcrumbs

npm npm GitHub stars

Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. This package is backwards compatible to support both Vue 1.x and Vue 2.x.

DEMO

Installation

<script src="../dist/vue-breadcrumbs.min.js"></script>
Vue.use(VueBreadcrumbs)

or via npm:

$ npm install vue-breadcrumbs
import VueBreadcrumbs from 'vue-breadcrumbs'

Vue.use(VueBreadcrumbs)

Define the matching breadcrumb text in your routes.

An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:

Vue.use(VueBreadcrumbs, {
  template: '<nav class="breadcrumb" v-if="$breadcrumbs.length"> ' +
    '<router-link class="breadcrumb-item" v-for="(crumb, key) in $breadcrumbs" :to="linkProp(crumb)" :key="key">{{ crumb | crumbText }}</router-link> ' +
    '</nav>'
});

By default the plugin will autoregister a breadcrumbs component which is globally accessible in your app (thanks to HermannBjorgvin. To disable this functionality you can set the registerComponent option to false when registering the component, like so:

Vue.use(VueBreadcrumbs, {
  registerComponent: false
});

Note: if referencing directly in the browser rather than as a module, there is no way to stop the default component from registering.

Usage

Vue 1.x

Use the breadcrumb: property of a route or subRoute, e.g.:

router.map({
  '/': {
    component: Page,
    breadcrumb: 'Home Page',
    subRoutes: {
      '/foo': {
        component: Foo,
        breadcrumb: 'Foo Page'
      },
      '/bar': {
        component: Bar,
        breadcrumb: 'Bar Page'
      }
    }
  }
})

Vue 2.x

Use the meta.breadcrumb: property of a route or child route, e.g.:

new VueRouter({
  routes: [
    {
      path: '/', 
      component: Page,
      meta: {
        breadcrumb: 'Home Page',
      },
      children: [
        {
          path: '/foo', 
          component: Foo,
          meta: {
            breadcrumb: 'Foo Page'  
          }
        },
        {
          path: '/bar', 
          component: Bar,
          meta: {
            breadcrumb: 'Bar Page'
          }
        }
      ]
    }
  ]
})

You can then render the breadcrumbs using the included <breadcrumbs> component or using your own markup logic with the global this.$breadcrumbs property which will return an array of active matched routes.

License

MIT

You can’t perform that action at this time.