Switch branches/tags
Nothing to show
Find file History
Latest commit 8e843b8 Jul 5, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Title fixed. Jul 4, 2017
README.md Minor edits. Jun 9, 2017
example.jpg Screenshot added. Jul 4, 2017
vs-crumbs.js Minor formatting. Jul 1, 2017


Very simple Vue breadcrumbs in 40 lines of code

Works with multi-level paths without the need for child views. For example: "/foo/bar" and "/foo/boo" or even "/foo/:id" can all be used at the same level with a single router-view. Supports child views too.

Requires: vue-router.

Live Demo



  • root - name of the root element, default is 'home'


Simply add 'vs-crumbs.js' file into your project and insert one or more tags anywhere:


Then style your separator:

.vs-crumbs a:after{ padding: 0 12px; color: #888; content: "/"; }

By default, the component uses router path to display breadcrumb names.

You can override this with custom names by using meta.crumbs:

{ path: '/foo/bar', component: FooBar, meta: { crumbs: '/My Foo/My Bar'} }

This component also sets page title to "home : foo : bar".

See the "test/index.html" file for more examples of how to use it.