Radial Hamburger Navigation Component – vue-quick-menu

Install & Download:

# NPM
$ npm install vue-quick-menu --save

Description:

vue-quick-menu is an easy-to-use and cross-platform radial hamburger navigation component for Vue.js.

How to use it:

1. Install and import the component.

import Vue from 'vue'
import quickMenu from 'vue-quick-menu'

2. Register the component.

export default {
  components: {
    quickMenu
  },
}

3. Add the radial navigation component to the template.

<quick-menu :menu-count=getCount :icon-class=icons :menu-url-list=list :background-color=backgroundColor :color=color :position=position :is-open-new-tab=getIsOpenNewTab @process=print></quick-menu>

export default {
  name: 'demo',
  data () {
    return {
      count:4,
      icons:["fa fa-github","fa fa-comment","fa fa-code","fa fa-envelope"],
      list:[{'isLink':false},{'isLink':true,url:"/doo"},{'isLink':true,url:"/foo"},{'isLink':false}],
      backgroundColor:'#17c4c5',
      color:'#ffffff',
      position:'top-left',
      isOpenNewTab:false
      
    }
  },
  components:{
  'quickMenu':quickMenu
}}

4. Possible props.

menuCount:{
  type: Number,
  required: true,
  default:4
},
iconClass:{
  type:Array,
  required: true
},
menuUrlList:{
  type:Array, // {isLink:true,url:\foo}
  required: true 
},
backgroundColor:{
  type:String,
  default:'#20babb'
},
color:{
  type:String,
  default:'#fff'
},
isOpenNewTab:{
  type:Boolean,
  default:false
},
position:{
  type:String,
  default:'top-left' // top-left,top-right,bottom-left or bottom-right
}