GitHub - J3-Tech/Vue-Tree-Navigation: Vue.js tree navigation with vue-router support (original) (raw)

vue-tree-navigation

Vue.js 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

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

Include with a script tag

Example

Requirements

• Vue.js

Developers

$ yarn dev

$ yarn build

$ yarn prettier $ yarn lint

$ yarn unit $ yarn unit --verbose

$ yarn e2e