vue-tree-navigation  

> 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

$3

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.

$3

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

Installation

$3

`console
$ npm install vue-tree-navigation
`

_main.js_

`javascript
import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);
`

$3

`html



`

_Example_

`html



`

Requirements

- Vue.js

Developers

`console
$ yarn dev

$ yarn build

$ yarn prettier
$ yarn lint

$ yarn unit
$ yarn unit --verbose

$ yarn e2e
``