Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcodpt/vue-tree-nav
Navigation tree menu component with nice integration with vue-router
https://github.com/marcodpt/vue-tree-nav
component menu nav navbar navigation sidebar sidemenu tree vue vue-router vuejs2
Last synced: 4 days ago
JSON representation
Navigation tree menu component with nice integration with vue-router
- Host: GitHub
- URL: https://github.com/marcodpt/vue-tree-nav
- Owner: marcodpt
- License: mit
- Created: 2018-08-21T23:37:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-30T13:27:15.000Z (over 5 years ago)
- Last Synced: 2024-09-20T06:51:52.925Z (about 2 months ago)
- Topics: component, menu, nav, navbar, navigation, sidebar, sidemenu, tree, vue, vue-router, vuejs2
- Language: Vue
- Homepage: https://marcodpt.github.io/vue-tree-nav/
- Size: 6.07 MB
- Stars: 27
- Watchers: 3
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-tree-nav
Navigation tree menu component with nice integration with vue-router
- Ready out of the box!
- Side bar with infinite depth
- Links and dropdows with infinite depth on both right and left side
- Font Awesome icons
- Css transitions
- Beautiful themes to choose
- Complete customizable
### [Live Demo](http://marcodpt.github.io/vue-tree-nav)
## Install
```
npm install --save vue-tree-nav
```
## Usage
```javascript
import Vue from 'vue'
import treeNav from 'vue-tree-nav'
new Vue({
components: {
'vue-tree-nav': treeNav
},
data: {
left: [
{
label: 'Home',
icon: 'home',
href: '#/home'
}, {
label: 'Animals',
children: [
{
label: 'Elephant',
href: '#/animals/elephant'
}, {
label: 'Lion',
href: '#/animals/lion'
}, {
label: 'Bear',
href: '#/animals/bear'
}, {
label: 'Eagle',
href: '#/animals/eagle'
}, {
label: 'Wolf',
href: '#/animals/wolf'
}
]
}
],
right: [
{
href: 'https://github.com/marcodpt/vue-tree-nav',
icon: 'brands/github'
}
]
}
}).$mount('#app')
```
```html
```
- If you pass directly your vue-router routes in **side**, **left** or **right** prop it will do some magic, ignoring routes with :variable and redirect for obvious reasons
### Props
- side
- type: Array
- default: []
- description: Side navigation menu, see section **Items** below
- left
- type: Array
- default: []
- description: Top bar on the left, see section **Items** below
- right
- type: Array
- default: []
- description: Top bar on the right, see section **Items** below
- location
- type: String
- default: ""
- description: Current location use $route.fullPath with vue-router or window.location.href without
- showPath
- type: Boolean
- default: true
- description: show current path near hamburguer menu
- barScale
- type: Number
- default: 1
- description: scale of icons and font in top bar
- sideScale
- type: Number
- default: 1
- description: scale of icons and font in side bar
- bgColor
- type: String
- default: '#f3f3f3'
- description: background color of top and side bar
- fontColor
- type: String
- default: '#666666'
- description: font color of top and side bar
- hoverColor
- type: String
- default: '#dddddd'
- description: background color in case of hovering any link
- activeColor
- type: String
- default: '#000000'
- description: active font color of top and side bar, active items will change font color
### Items of side, left, right
- items (Object):
- label
- type: String
- default: ""
- description: label that appear in the screen
- href
- type: String, Function
- default: ""
- description: string it will be a normal link, otherwise it will call the function
- icon
- type: String
- default: ""
- description: One of [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&s=solid&m=free)
- children
- type: Array
- default: []
- description: Again it is an array of items, in the side menu you can go infinity depth, in the top bar it will ignore, soon we will create a dropdown
## Contribute
We need help! Our goals are:
- Beautiful CSS Themes created by users
- Beautiful CSS transitions and animations
- Add tests
- More usage examples and better home page
- Add support to most browsers and devices
What is outside of the scope of this project:
- Use any css framework! Althought we want themes compatible!