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

<template>
  <vue-tree-navigation />
</template>

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

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

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

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

<script src="https://unpkg.com/[email protected]/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

$ yarn e2e