Vue.js tree navigation with vue-router support
For more detailed information see documentation/demo
- unlimited number of levels
- optional vue-router support (v2.0.0 or higher)
- generate navigation items automatically from vue-router routes or define them manually
- define a default open level
- auto-open a level when a corresponding URL visited
- focused on core functionality, only necessary styles included
- elements are provided with meaningful classes to make customizations comfortable (for example
NavigationItem--active,NavigationLevel--level-1,NavigationLevel--closed)
Let's suppose you use vue-router with the following routes definition
const routes = [
{
name: 'Home',
path: '/',
},
{
name: 'Running',
path: '/running',
children: [
{
name: 'Barefoot',
path: 'barefoot',
},
],
},
{
name: 'Yoga',
path: '/yoga',
children: [
{
name: 'Mats',
path: 'mats',
},
{
name: 'Tops',
path: 'tops',
},
],
},
{
name: 'About',
path: '/about',
children: [
{
name: 'Career',
path: 'career',
children: [
{
name: 'Design',
path: 'design',
},
],
},
],
},
];Then simply include vue-tree-navigation
<template>
<vue-tree-navigation />
</template>and it will generate the following menu:
- Home // --> /
- Running // --> /running
- Barefoot // --> /running/barefoot
- Yoga // --> /yoga
- Mats // --> /yoga/mats
- Tops // --> /yoga/tops
- About // --> /about
- Career // --> /about/career
- Design // --> /about/career/design
Do not forget to use named routes since vue-tree-navigation uses name field to label navigation items.
The following configuration
<template>
<vue-tree-navigation :items="items" />
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Products', children: [
{ name: 'Shoes', path: 'shoes' }
]},
{ name: 'About', path: 'about', children: [
{ name: 'Contact', path: 'contact', children: [
{ name: 'E-mail', element: 'email' },
{ name: 'Phone', element: 'phone' }
]},
]},
{ name: 'Github', external: 'https://github.com' },
],
};
},
};
</script>will generate
- Products // category label
- Shoes // --> /shoes
- About // --> /about
- Contact // --> /about/contact
- E-mail // --> /about/contact#email
- Phone // --> /about/contact#phone
- Github // --> https://github.com
For more examples see documentation/demo
$ npm install vue-tree-navigationmain.js
import VueTreeNavigation from 'vue-tree-navigation';
Vue.use(VueTreeNavigation);<script src="https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js"></script>
<script>
Vue.use(VueTreeNavigation)
</script>Example
<div id="app">
<vue-tree-navigation :items="items" :defaultOpenLevel="1" />
</div>
<script>
Vue.use(VueTreeNavigation)
const app = new Vue({
el: '#app',
data: {
items: [
...
],
}
})
</script>$ yarn dev
$ yarn build
$ yarn prettier
$ yarn lint
$ yarn unit
$ yarn unit --verbose
$ yarn e2e