Vue.js 2 tree navigation with vue-router support
For more detailed information see documentation/demo
Features
- 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
)
Example
1. Navigation items generated from vue-router routes
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
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.
2. Menu items defined manually
The following configuration
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
Installation
NPM
$ npm install vue-tree-navigation
main.js
; Vue;
Include with a script tag
Example
Requirements
Developers
$ yarn dev $ yarn build $ yarn prettier$ yarn lint $ yarn unit$ yarn unit --verbose $ yarn e2e