Elegant Circle & Linear Popup Menu Component – VueCircleMenu

A vue component to create animated circular or linear popup menus on the app.

How to use it:

1. Import the VueCircleMenu.

import CircleMenu from 'vue-circle-menu';

2. Register the component.

Vue.component('CircleMenu', CircleMenu)
// or 
export default {
  components: {
    CircleMenu
  }
}

3. Add the circle menu component to the app template. In this example, we’re using Font Awesome for icons and Animate.css for CSS3 animations.

<circle-menu type="middle" :number="4" animate="animated jello" mask='white' circle>
  <button type="button" slot="item_btn"></button>
  <a slot="item_1" class="fa fa-twitter fa-lg"></a>
  <a slot="item_2" class="fa fa-weixin fa-lg"></a>
  <a slot="item_3" class="fa fa-weibo fa-lg"></a>
  <a slot="item_4" class="fa fa-github fa-lg"></a>
</circle-menu>

4. All possible props.

// top,bottom,left,right,middle,middle-around
type: {
  type: String,
  required: true
},
// the number of menus
number: {
  type: Number,
  required: true,
  validator: function (value) {
    return value > 1 && value < 5
  }
},
// applies animations to menus
animate: String,
// "white" or "black"
mask: String,
// circular or square button
circle: Boolean,
// display toggle button
btn: Boolean,
// background color
colors: Array

Live Preview:

Download Details:

Author: OYsun

Live Demo: https://github.com/OYsun/VueCircleMenu

Download Link: https://github.com/OYsun/VueCircleMenu/archive/master.zip

Official Website: https://github.com/OYsun/VueCircleMenu

Install & Download:

npm install vue-circle-menu