A Vue.js tree navigation menu

vue-tree-navigation

A Vue.js tree navigation menu with unlimited number of levels and minimum styles included

Features:

unlimited number of levels
you can define default open level
focused on core functionality, only necessary styles included - just apply your own styles like I did for demo page :wink:

Installation

$ npm install vue-tree-navigation

main.js

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

Usage

file.vue

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

export default {
  ...
  data() {
    return {
      items: [
        { name: 'First category', children: [
          { name: 'Category item', href: '#take-me-somewhere' },
          { name: 'Category item', href: '#take-me-somewhere' }
        ]},
        { name: 'Second category', href: '#take-me-somewhere' }
      ],
      defaultOpenLevel: 1
    }
  },
  ...
};

items Array

An array containing navigation menu items.

You don't need to specify href field. Menu item will be rendered as a simple value instead of a hyperlink in this case.

defaultOpenLevel Number

Optional. Default value is 0 (everything is closed).

Nuxt

You can use the component in your Nuxt.js project if you disable server-side rendering for your Nuxt plugin:

plugins/vue-tree-navigation.js

import Vue from 'vue';
import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

nuxt.config.js

module.exports = {
  ...
  plugins: [
    { src: '~plugins/vue-tree-navigation', ssr: false }
  ],
  ...
}

Developers

Install dependencies:

$ npm install

Run tests:

$ npm run test

Run tests in verbose mode:

$ npm run test:verbose

Run development server:

$ npm run dev

Build:

$ npm run build

Run demo development server:

$ cd demo
$ npm install
$ npm run dev