vue-tree-nav

Navigation tree menu component with nice integration with vue-router

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-tree-nav
2610.0.165 years ago6 years agoMinified + gzip package size for vue-tree-nav in KB

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

Install

npm install --save vue-tree-nav

Usage

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')

<vue-tree-nav
  :left="left"
  :right="right"
></vue-tree-nav>
- 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!