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
