Vue.js 2 tree navigation
npm install vue-tree-navigation> Vue.js 2 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
``javascript`
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_
`html`
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
`html
`
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
`console`
$ npm install vue-tree-navigation
_main.js_
`javascript
import VueTreeNavigation from 'vue-tree-navigation';
Vue.use(VueTreeNavigation);
`
`html
`
_Example_
`html
`
- Vue.js
`console
$ yarn dev
$ yarn build
$ yarn prettier
$ yarn lint
$ yarn unit
$ yarn unit --verbose
$ yarn e2e
``