vue-tree-navigation

vue-tree-navigation

Vue.js 2 tree navigation with vue-router support

For more information see documentation/demo

Features

• unlimited number of levels
• optional vue-router support (v2.0.0 or higher)
• a possibility to 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)
• external URLs support

Example

<template>
  <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { name: 'Products', children: [                       // category label
            { name: 'Shoes', route: 'shoes' }                   // /shoes
          ]},
          { name: 'About', route: 'about', children: [          // /about
            { name: 'Contact', route: 'contact', children: [    // /about/contact       
              { name: 'E-mail', element: 'email' },             // /about/contact#email
              { name: 'Phone', element: 'phone' }               // /about/contact#phone
            ]},
          ]},
          { name: 'Github', external: 'https://github.com' },   // https://github.com
        ],
      };
    },
  };
</script>

Installation

NPM

$ npm install vue-tree-navigation

main.js

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

Include with a script tag

<script src="https://unpkg.com/vue-tree-navigation@3.0.0/dist/vue-tree-navigation.js"></script>

<script>
  Vue.use(VueTreeNavigation)
</script>

Example

<div id="app">
  <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
</div>

<script>
  Vue.use(VueTreeNavigation)

  const app = new Vue({
    el: '#app',
    data: {
      items: [
        ...
      ],
    }
  })
</script>

Requirements

• Vue.js

Developers

$ yarn dev

$ yarn build

$ yarn prettier
$ yarn lint

$ yarn unit
$ yarn unit --verbose