# vue-tree-navigation [![Version](https://img.shields.io/npm/v/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation) [![License](https://img.shields.io/npm/l/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation) > Vue.js 2 tree navigation with vue-router support For more detailed information see [documentation/demo](https://misrob.github.io/vue-tree-navigation) ## Features - unlimited number of levels - optional [vue-router](https://router.vuejs.org/en/) 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 ```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. ### 2. Menu items defined manually 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](https://misrob.github.io/vue-tree-navigation) ## Installation ### NPM ```console $ npm install vue-tree-navigation ``` _main.js_ ```javascript import VueTreeNavigation from 'vue-tree-navigation'; Vue.use(VueTreeNavigation); ``` ### Include with a script tag ```html ``` _Example_ ```html

``` ## Requirements - [Vue.js](https://vuejs.org/) ## Developers ```console $ yarn dev $ yarn build $ yarn prettier $ yarn lint $ yarn unit $ yarn unit --verbose $ yarn e2e ```

	Stars	Issues	Version	Updated	Created
liquor-tree	395	103	0.2.70	4 years ago	6 years ago
v-treeview	30	21	0.2.1	6 years ago	6 years ago
vue-tree-nav	26	1	0.0.16	5 years ago	6 years ago
vue-tree-navigation			4.0.1	5 years ago	6 years ago

liquor-tree vs v-treeview vs vue-tree-nav vs vue-tree-navigation

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past