vue-tree-navigation

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

View demo Download Source

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
Console

main.js

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);
JavaScript

Usage

file.vue

<vue-tree-navigation :items="items" :defaultOpenLevel="defaultOpenLevel" />
HTML
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
    }
  },
  ...
};
JavaScript

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);
JavaScript

nuxt.config.js

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

Developers

Install dependencies:

$ npm install
Console

Run tests:

$ npm run test
Console

Run tests in verbose mode:

$ npm run test:verbose
Console

Run development server:

$ npm run dev
Console

Build:

$ npm run build
Console

Run demo development server:

$ cd demo
$ npm install
$ npm run dev
Console

GitHub

MisRob/vue-tree-navigation

??

— Read More

Latest commit to the undefined branch on unknown
Download as zip