A beautiful circle menu powered by Vue.js



查看中文文档,请移步至 这里


For a better demonstration, please use the phone scan the following two-dimensional code view demo or click here http://web-oysun.cn/VueCircleMenu/



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


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

Detailed instructions



The type parameter is required, indicating the type of the menu, a total of about six:top,bottom,left,right,middle,middle-around


The number parameter is required,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 Note:

  • when the number value of 3, type type for middle or middle-around is invalid
  • The number parameter fills the number, but in the vue propes,If we want to pass down an actual JavaScript number, we need to use v-bind so that its value is evaluated as a JavaScript expression.For more information click here


Fill in circle to make the menu button rounded, the default is the square button:


Fill in mask produces mask, divided into two kinds: "white" and "black".(Note: do not fill out or fill in the wrong type all think don't need a mask)


Animate is to add animation to the menu, as long as you can add animation css class, you can also introduce css animation library, such as animate.css


Colors specifies the background color of the button and menu, and does not use this property, the default color configuration is used, and the default color of the component is:

If you want to configure the color, colors into an array,In addition, it is important that an array of values must be color code, rather than the CSS class.

  <circle-menu type="bottom" :number="4" colors="[ '#563761', 'rgb(255, 255, 102)', '#FFE26F', '#F3825F', '#F19584' ]">
    <button type="button" slot="item_btn">button>
    <a slot="item_1" class="fa fa-twitter fa-lg" herf="#" >a>
    <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" >a>
    <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" >a>
    <a slot="item_4" class="fa fa-github fa-lg" herf="#" >a>

Note color code must be one-to-one correspondence, the first color code to refer to the button, the second color for the first menu and so on, a total of five color code, fill more, fill less or not fill in the color code is invalid



The name slot refers to the custom switch button, and when you need to customize the switch button, do not fill in the btn property, use the slot, so you can disable the default switch button and use the custom button(Custom switch button has the advantage that you can bind events to the switch button to do further operations)


These slot one-to-one correspondence refer to the four menu button


According to these five slot,Actually means that the component is actually a parcel content box ,The contents of the box are set in slot

  • Through slot, you can fill in any content, and custom style
  <circle-menu type="top" :number="4">
    <button type="button" slot="item_btn">button>
    <router-link :to="..." slot="item_1">
    <span slot="item_2">a>
    <div slot="item_3">a>
    <img  slot="item_4" src="img" />
  • Through slot, to bind any event for menu
  <circle-menu type="middle-around" :number="4">
    <button type="button" slot="item_btn" @click="dosomething" >button>
    <a slot="item_1" herf="#" @click="">a>
    <v-touch tag="a" v-on:tap="onTap" slot="item_2">v-touch>
    <v-touch tag="a" v-on:tap="onTap" slot="item_3">v-touch>
    <a slot="item_4" herf="#" v-on:handler="handler">a>

Simple example


  <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 type="top" :number="3" mask='black' btn colors="[ 'rgb(255, 255, 102)', '#A7425C', '#FFE26F', 'F3825F', '#F19584' ]">
    <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>

Installation and use

npm install vue-circle-menu
  • If used as a global component
//In the project entry file
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)
  • If as a local component
//In a component
import CircleMenu from 'vue-circle-menu'
export default {
  components: {

Bug and suggestions

If you encounter problems or suggestions in the use, welcome to issues



  • English translation

    English translation

    Hey guys,

    this menu is pretty nice. Is it possible to translate the documentation in English so more people can use your VueCircleMenu?

    Thanks in advance Sven

    opened by sveeen 3
  • colors不能正常使用


    [Vue warn]: Invalid prop: type check failed for prop "colors". Expected Array, got String. (found in component <CirleMenu>) 添加colors报错

    opened by MaomaoFE 2
  • Font awesome square issue

    Font awesome square issue

    I have a problem with some of my font awesome

    I used the code above inside my vue file, but only thing i saw is square, home icon and cube icons is OK, but not custom brand favicon and other 2 icon, is there any way to trouble shoot, thanks

    screen shot 2018-09-05 at 11 09 00 am

    opened by GreenRidingHood 1
  • 文档部分


    本来想在你基础上做一个定制的,但是下载代码下来看发现有点困难。主要是才开始学webpack所以对你打包部分不是很了解,如果可以的话希望能够相应部分说明文档。 再有一个是个人觉得demo写得不是很好,这个产品应该是具备独立使用的,但是index.html并没有使用到最终打包出来的CircleMenu.js文件啊,所以对于怎么引用你这个文件并不清楚。

    opened by rowthan 1
  • 为什么我的animate没有效果



    <CircleMenu type="top" :number='4' animate="animated jello" mask='black' circle>
          <button type="button" slot="item_btn"></button>
          <a slot="item_1" class="fa fa-twitter fa-lg">a</a>
          <a slot="item_2" class="fa fa-weixin fa-lg">b</a>
          <a slot="item_3" class="fa fa-weibo fa-lg">c</a>
          <a slot="item_4" class="fa fa-github fa-lg">d</a>
    opened by dxwb 0
  • Link to Demo page.

    Link to Demo page.

    I cane upon this Github page when reading blogs on my phone. Only there is no way to go to the demo page when you look at this github page on your phone... Please add a link!

    opened by mesqueeb 0
  • Is it possible to display 3 buttons with `middle...` type?

    Is it possible to display 3 buttons with `middle...` type?

    It seems that selecting 3 buttons doesn't work for middle or middle-around menu types; only 2 or 4 buttons works.

    Also (and I probably should log a separate issue but), it would be nice to support a few more buttons and/or submenus. 🤷‍♂️

    opened by humblecoder 0
  • V1.1.0(Jan 23, 2017)

    • fix #12 ,新增"number"参数,自定义子菜单个数
    • 提取圆环大小为less变量,统一px单位
    • 优化middle和middle-around中的less代码
    Source code(tar.gz)
    Source code(zip)
  • V1.0.1(Jan 23, 2017)

    • fix点击黑白mask无法切换菜单 https://github.com/OYsun/VueCircleMenu/issues/6
    • 增加colors参数的判断
    • 更新包依赖,修复Vue packages version mismatch error的错误
    Source code(tar.gz)
    Source code(zip)
Hengbin Yan 172 Dec 29, 2022
🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.com/

vue-burger-menu An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations. Demo & exam

Mohit kumar Bajoria 731 Jan 3, 2023
A Vue.js sidebar menu component with vue-router compatibility

A Vue.js sidebar menu component with vue-router compatibility

null 553 Dec 22, 2022
Vue-3d-menu - Vue 的3d菜单组件

vue-3d-menu Vue 的 3d 菜单组件。 效果参照 2013 版 miaov 官网右上角菜单。 Examples To see a demo. Installation npm install vue-3d-menu Usage import Vue from 'vue'; impor

xieshuang 89 Oct 17, 2022
Simple accordion menu component for Vue.js

vue-accordion Simple accordion menu component for Vuejs Check it out live! Note The API has changed. Check v0.0.3 documentation if you use the old ver

null 171 Nov 24, 2022
Vue component for fast create simple menu block

Vue simple menu Vue component for fast create simple menu block I will be glad to correct the inaccuracy of the my English ?? Описание на русском язык

RG.RU 33 Jul 4, 2022
Dropdown menu component for Vue

Dropdown menu Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content. Fully customizable

Innologica Ltd 77 Dec 31, 2022
🎈Customizable floating menu for Vue

vue-float-menu finds the optimal menu orientation depending on the position of the menu. for e.g if the menu is placed at the bottom edge and the orientation set to bottom, the component will automatically flip the orientation to top.

Prabhu Murthy 478 Dec 30, 2022
Navigation tree menu component with nice integration with vue-router

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 dropdow

Marco Tomic 24 Sep 22, 2022
⚓Dockable Menu bar for Vue

⚓Dockable Menu bar for Vue

Prabhu Murthy 260 Jan 4, 2023
vue context menu popup

vue-context-menu-popup Usage <ContextMenu ref="contextMenu" :menu-items="menuItems"/> <div class="context-menu-trigger" @click.right.prevent="$refs.

Johnathan Barrett 1 Mar 18, 2022
Simplify Vue context menu component

vue-easycm 一个简单好用的 VUE 环境菜单 (Context Menu) 更多demo: http://boenfu.github.io/vue-easycm/ 配置简单 自定义程度高 多种引用方式 最高三层菜单 可添加字体图标 边界检测 Install npm install vue-

格桑 51 Nov 23, 2022
Vue sidebar menu akahon

vue-sidebar-menu-akahon Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm ru

Fayzullo Saidakbarov 40 Dec 15, 2022
Sidebar-menu - A custom NavigationDrawer and Top Bar component using the Vue Js and Vuetify

Projeto: sidebar-menu Protótipo: Para acessar o protótipo clique nesse LINK. Obj

Klinger Matheus 2 Jan 4, 2023
Menu/Contextmenu Component for vue2

vue-menu Introduction Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu

Koike Michitaro 259 Nov 10, 2022
SelectMenu for Vuejs, A simple, easier and highly customized menu solution

v-selectmenu SelectMenu for Vuejs, A simple, easier and highly customized menu solution Examples and Documentation Live Examples on CodePen, more exam

Terry Zeng 187 Dec 27, 2022
Creating a navigation menu with animations like on Stripe

Vue Stripe Menu Create a dropdown like on Stripe Demo Project How to install Install the library in your project $ npm i vue-stripe-menu // or $ yarn

Alexey Khrushch 468 Dec 20, 2022
Dropdown menu plugin for vuejs, supported ssr.

Customizable dropdown menu plugin for vuejs. SSR supported. ✨ Demo: https://v-dropdown-menu.now.sh ?? NPM: https://www.npmjs.com/package/v-dropdown-me

RadKod 23 Nov 4, 2022
A simple hands-on mobile nested menu UI component with a smooth slide animation

vue-nested-menu A simple hands-on mobile nested menu UI component with a smooth slide animation. demo Installation Yarn / NPM $ yarn add vue-nested-me

guAnsunyata 34 Dec 1, 2022