{"id":13376211,"url":"https://github.com/J3-Tech/Vue-Tree-Navigation","last_synced_at":"2025-03-13T02:30:36.819Z","repository":{"id":27943444,"uuid":"115540689","full_name":"J3-Tech/Vue-Tree-Navigation","owner":"J3-Tech","description":"Vue.js tree navigation with vue-router support","archived":false,"fork":false,"pushed_at":"2023-12-25T03:54:42.000Z","size":2659,"stargazers_count":160,"open_issues_count":13,"forks_count":23,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-14T20:57:45.113Z","etag":null,"topics":["navigation","tree","vue"],"latest_commit_sha":null,"homepage":"https://vue-tree-navigation.j3-tech.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/J3-Tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-12-27T16:54:16.000Z","updated_at":"2023-12-26T09:27:06.000Z","dependencies_parsed_at":"2023-01-14T08:30:10.804Z","dependency_job_id":"f04dd09d-2e8a-4bc8-bb09-e24d14e17fea","html_url":"https://github.com/J3-Tech/Vue-Tree-Navigation","commit_stats":null,"previous_names":["misrob/vue-tree-navigation"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J3-Tech%2FVue-Tree-Navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J3-Tech%2FVue-Tree-Navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J3-Tech%2FVue-Tree-Navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J3-Tech%2FVue-Tree-Navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/J3-Tech","download_url":"https://codeload.github.com/J3-Tech/Vue-Tree-Navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243327720,"owners_count":20273734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["navigation","tree","vue"],"created_at":"2024-07-30T05:02:34.753Z","updated_at":"2025-03-13T02:30:36.402Z","avatar_url":"https://github.com/J3-Tech.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue-tree-navigation\n[![Version](https://img.shields.io/npm/v/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation)\n[![Node.js CI](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/node.js.yml/badge.svg)](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/node.js.yml)\n[![Build Vue](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/deploy.yaml/badge.svg)](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/deploy.yaml)\n[![codecov](https://codecov.io/gh/J3-Tech/Vue-Tree-Navigation/branch/master/graph/badge.svg?token=UMg49v76h5)](https://codecov.io/gh/J3-Tech/Vue-Tree-Navigation)\n\n\u003e Vue.js tree navigation with vue-router support\n\nFor more detailed information see [documentation/demo](https://vue-tree-navigation.j3-tech.com)\n\n## Features\n\n- unlimited number of levels\n- optional [vue-router](https://router.vuejs.org/en/) support (v2.0.0 or higher)\n- generate navigation items automatically from _vue-router_ routes or define them manually\n- define a default open level\n- auto-open a level when a corresponding URL visited\n- focused on core functionality, only necessary styles included\n- elements are provided with meaningful classes to make customizations comfortable (for example `NavigationItem--active`, `NavigationLevel--level-1`, `NavigationLevel--closed`)\n\n## Example\n\n### 1. Navigation items generated from _vue-router_ routes\n\nLet's suppose you use _vue-router_ with the following routes definition\n\n```javascript\nconst routes = [\n  {\n    name: 'Home',\n    path: '/',\n  },\n  {\n    name: 'Running',\n    path: '/running',\n    children: [\n      {\n        name: 'Barefoot',\n        path: 'barefoot',\n      },\n    ],\n  },\n  {\n    name: 'Yoga',\n    path: '/yoga',\n    children: [\n      {\n        name: 'Mats',\n        path: 'mats',\n      },\n      {\n        name: 'Tops',\n        path: 'tops',\n      },\n    ],\n  },\n  {\n    name: 'About',\n    path: '/about',\n    children: [\n      {\n        name: 'Career',\n        path: 'career',\n        children: [\n          {\n            name: 'Design',\n            path: 'design',\n          },\n        ],\n      },\n    ],\n  },\n];\n```\n\nThen simply include _vue-tree-navigation_\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-tree-navigation /\u003e\n\u003c/template\u003e\n```\n\nand it will generate the following menu:\n\n```\n- Home          // --\u003e /\n- Running       // --\u003e /running\n  - Barefoot    // --\u003e /running/barefoot\n- Yoga          // --\u003e /yoga\n  - Mats        // --\u003e /yoga/mats\n  - Tops        // --\u003e /yoga/tops\n- About         // --\u003e /about\n  - Career      // --\u003e /about/career\n    - Design    // --\u003e /about/career/design\n```\n\nDo not forget to use named routes since _vue-tree-navigation_ uses `name` field to label navigation items.\n\n### 2. Menu items defined manually\n\nThe following configuration\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-tree-navigation :items=\"items\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        items: [\n          { name: 'Products', children: [\n            { name: 'Shoes', path: 'shoes' }\n          ]},\n          { name: 'About', path: 'about', children: [\n            { name: 'Contact', path: 'contact', children: [\n              { name: 'E-mail', element: 'email' },\n              { name: 'Phone', element: 'phone' }\n            ]},\n          ]},\n          { name: 'Github', external: 'https://github.com' },\n        ],\n      };\n    },\n  };\n\u003c/script\u003e\n```\n\nwill generate\n\n```\n- Products     // category label\n  - Shoes      // --\u003e /shoes\n- About        // --\u003e /about\n  - Contact    // --\u003e /about/contact\n    - E-mail   // --\u003e /about/contact#email\n    - Phone    // --\u003e /about/contact#phone\n- Github       // --\u003e https://github.com\n```\n\nFor more examples see [documentation/demo](https://vue-tree-navigation.j3-tech.com)\n\n## Installation\n\n### NPM\n\n```console\n$ npm install vue-tree-navigation\n```\n\n_main.js_\n\n```javascript\nimport VueTreeNavigation from 'vue-tree-navigation';\n\nVue.use(VueTreeNavigation);\n```\n\n### Include with a script tag\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  Vue.use(VueTreeNavigation)\n\u003c/script\u003e\n```\n\n_Example_\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cvue-tree-navigation :items=\"items\" :defaultOpenLevel=\"1\" /\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  Vue.use(VueTreeNavigation)\n\n  const app = new Vue({\n    el: '#app',\n    data: {\n      items: [\n        ...\n      ],\n    }\n  })\n\u003c/script\u003e\n```\n\n## Requirements\n\n- [Vue.js](https://v2.vuejs.org/)\n\n## Developers\n\n```console\n$ yarn dev\n\n$ yarn build\n\n$ yarn prettier\n$ yarn lint\n\n$ yarn unit\n$ yarn unit --verbose\n\n$ yarn e2e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJ3-Tech%2FVue-Tree-Navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJ3-Tech%2FVue-Tree-Navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJ3-Tech%2FVue-Tree-Navigation/lists"}