Awesome Open Source
Awesome Open Source

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
    • 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!

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Vue (84,652
Component (4,505
Vuejs2 (2,652
Vue Router (2,216
Tree (1,626
Navigation (1,580
Menu (834
Sidebar (224
Related Projects