🐰A Beautiful Circle Radial Menu In Vue.js

VueCircleMenu is a Vue component for creating an animated circular or linear popup menus on an app.

javascript radial menu, circular navigation menu examples, vue circle menu, vue radial menu, vue js modal popup, vuetify popup menu, animated radial circular menu

How to make use of it:

Install and download:

npm install vue-circle-menu

1. Import VueCircleMenu.

import CircleMenu from 'vue-circle-menu';

2. Register the component.

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

3. Add the Circle List component to the application template.

<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

API

Props

Option	type	Description
type	String	Necessary,Specifies the type of menu,There are six types of：top,bottom,left,right,middle,middle-around
number(v1.1.0)	Number	Necessary,This is the v1.1.0 version of the api, specify the number of menus, the value should be greater than 2 less than 5, is only 2,3,4 of these three case
circle	boolean	Whether the menu button for rounded corners, the default for the square button
mask	String	There are two kinds of mask layer：”white” and “black”
animate	String	Sub menu animation,You can import an external css animation library, such as “animate.css”
btn	boolean	Switch button, fill in this property, there is the default switch button, do not fill is not the default, you need to define the switch button in the slot
colors	Array	The background color of the buttons and menus

Slot

SlotName	Description
item_btn	Customize the switch button
item_1	The contents of the first menu
item_2	The content of the second menu
item_3	The content of the third menu
item_4	The content of the fourth menu

Elegant Circle & Linear Popup Menu Component, VueCircleMenu Plugin/Github, circular navigation menu css, responsive circular navigation