items8 | Optional. An array containing tree navigation items. In case no 9 | items are provided, vue-tree-navigation will check if vue-router is available and 10 | will use its routes to generate navigation items. 11 |
12 |name Item labelpath Relative target.You need to install and configure vue-router
17 | if you wish path items to behave like router links. Otherwise they
18 | will behave like normal hyperlinks.
19 | element Element IDexternal Absolute external targetdefaultOpenLevel
27 | Optional. Default value is 0 (everything is closed).
28 |
5 |7 |Vue.js 2 tree navigation with vue-router support
6 |
NavigationItem--active,
27 | NavigationLevel--level-1, NavigationLevel--closed)
28 | This documentation serves as the demo page ;)
40 |
7 | $ npm install vue-tree-navigation
8 |
11 | import VueTreeNavigation from 'vue-tree-navigation';
12 |
13 | Vue.use(VueTreeNavigation);
14 |
19 | <script> src="https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js"></script>
20 | <script>
21 | Vue.use(VueTreeNavigation)
22 | </script>
23 |
26 | <div id="app">
27 | <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
28 | </div>
29 |
30 | <script>
31 | Vue.use(VueTreeNavigation)
32 |
33 | const app = new Vue({
34 | el: '#app',
35 | data: {
36 | items: [
37 | ...
38 | ],
39 | }
40 | })
41 | </script>
42 | The following configuration
5 |
7 | <template>
8 | <vue-tree-navigation :items="items" />
9 | </template>
10 |
11 | <script>
12 | export default {
13 | data() {
14 | return {
15 | items: [
16 | { name: 'Products', children: [
17 | { name: 'Shoes', path: 'shoes' }
18 | ]},
19 | { name: 'About', path: 'about', children: [
20 | { name: 'Contact', path: 'contact', children: [
21 | { name: 'E-mail', element: 'email' },
22 | { name: 'Phone', element: 'phone' }
23 | ]},
24 | ]},
25 | { name: 'Github', external: 'https://github.com' },
26 | ],
27 | };
28 | },
29 | };
30 | </script>
31 | will generate
34 |56 | Targets (except of external) will behave like router links in case you installed and 57 | configured vue-router. Otherwise they will behave like normal hyperlinks. 58 |
59 |5 | Click a button and check how an active navigation item is higlighted in the tree on 6 | the left 7 |
8 | 13 |Let's suppose you use vue-router with the following routes definition
16 |const routes = [
17 | {
18 | name: 'Home',
19 | path: '/',
20 | },
21 | {
22 | name: 'Running',
23 | path: '/running',
24 | children: [
25 | {
26 | name: 'Barefoot',
27 | path: 'barefoot',
28 | },
29 | ],
30 | },
31 | {
32 | name: 'Yoga',
33 | path: '/yoga',
34 | children: [
35 | {
36 | name: 'Mats',
37 | path: 'mats',
38 | },
39 | {
40 | name: 'Tops',
41 | path: 'tops',
42 | },
43 | ],
44 | },
45 | {
46 | name: 'About',
47 | path: '/about',
48 | children: [
49 | {
50 | name: 'Career',
51 | path: 'career',
52 | children: [
53 | {
54 | name: 'Design',
55 | path: 'design',
56 | },
57 | ],
58 | },
59 | ],
60 | },
61 | ];Then simply include vue-tree-navigation
63 |<template>
64 | <vue-tree-navigation />
65 | </template>and it will generate the following menu:
67 |95 | Do not forget to use named routes since vue-tree-navigation uses name field to 96 | label navigation items. 97 |
98 |5 | The side navigation for this documentation was built with vue-tree-navigation and 6 | the following setup. 7 |
8 |9 | You need to style the tree navigation on your own like I did for this website. I 10 | included only a few basic styles in the library because I believe this approach 11 | makes customizing the look much easier as you don't need to override plenty of 12 | styles. 13 |
14 |
16 | <template>
17 | <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
18 | </template>
19 |
20 | <script>
21 | export default {
22 | data() {
23 | return {
24 | items: [
25 | {
26 | name: "Introduction",
27 | path: "introduction",
28 | children: [
29 | { name: "Features", element: "features" },
30 | { name: "Requirements", element: "requirements" },
31 | { name: "Demo", element: "demo" }
32 | ]
33 | },
34 | { name: "Installation", path: "installation" },
35 | {
36 | name: "Usage",
37 | path: "usage",
38 | children: [
39 | {
40 | name: "Props",
41 | element: "props",
42 | children: [
43 | { name: "items", element: "items" },
44 | { name: "defaultOpenLevel", element: "default-open-level" }
45 | ]
46 | }
47 | ]
48 | },
49 | {
50 | name: "Examples",
51 | path: "examples",
52 | children: [
53 | { name: "Auto-generated", path: "auto" },
54 | { name: "Manually defined", path: "manual" },
55 | { name: "This website", path: "this" }
56 | ]
57 | },
58 | { name: "Styling", path: "styling" },
59 | {
60 | name: "Visit GitHub",
61 | external: "https://github.com/J3-Tech/Vue-Tree-Navigation"
62 | }
63 | ],
64 | };
65 | },
66 | };
67 | </script>
68 |
72 | const routes = [
73 | { path: "/", redirect: "/introduction" },
74 | { path: "/introduction", component: Introduction },
75 | { path: "/installation", component: Installation },
76 | { path: "/usage", component: Usage },
77 | {
78 | path: "/examples",
79 | component: Examples,
80 | redirect: "/examples/auto",
81 | children: [
82 | { path: "auto", component: ExampleAuto },
83 | { path: "manual", component: ExampleManual },
84 | { path: "this", component: ExampleThis }
85 | ]
86 | },
87 | { path: "/styling", component: Styling }
88 | ];
89 |
92 | .NavigationLevel__children {
93 | padding-left: 10px;
94 | }
95 |
96 | .NavigationLevel__parent {
97 | font-weight: 600;
98 | padding-bottom: 5px;
99 | }
100 |
101 | .NavigationItem {
102 | color: #545454;
103 | padding: 0;
104 | }
105 |
106 | .NavigationItem--active {
107 | color: #42b883;
108 | }
109 |
110 | .NavigationToggle__icon {
111 | border-color: #42b883;
112 | }
113 |