cool,highly interactive circular menu

Downloads in past


1.0.67 years ago8 years agoMinified + gzip package size for circular-menu in KB


aka, circular menu, wheel menu, circular navigation, wheel navigation.

Thanks for

Circular Navigation With CSS Transforms by Sara Soueidan


```npm install circular-menu```


Directly include dist/js/circular-menu.js and dist/css/circular-menu.css
It is wrapped as AMD module, meaning could use with RequireJS or commonJS, or just global varible "CMenu" 


sample menus

Live Demo

jsfiddle Demo

Browser compatibility

I tested in newer chrome, firefox, and IE Edge.



- value: ```0-360``` (unit is unnecessary)
- default: ```360```deg (complete circle)
- value: ```Int``` (0-5 is suitable)
- default: ```0``` (The default is good)
  • background:
- value: Acceptable CSS color value
- default: ```#323232```
  • backgroundHover:
- value: Acceptable CSS color value
- default: ```#515151```
- value: Acceptable CSS color value ( You should pass the color of your page. )
- default: ```transparent```
  • diameter(circular menu radius):
- value:  Int (unit is unnecessary)
- default: ```300```px
- value: "top" | "left" | "right" | "bottom"
- default: "top"
- value: ```0-360``` (unit is unnecessary)
- default: ```0``` deg
  • horizontal (Whether horizontal icon and text demo):
- value: ```true | false```
- default: ```true```
  • hideAfterClick (Whether hide menu after click):
- value: ```true | false```
- default: ```true```
  • menus: (Array of objects, specifying menu items, angle of each item mush < 90deg, it meaning "totalAngle / items number" must <= 90deg wrong use demo )
- title: String (Title is not too long, otherwise it will overflow container)
- icon: String (css class, e.g. "fa fa-facebook" "custom-icon icon1")
- href:
- String (like "" or "#hash")
- Object (like ```{url: "..", blank: true}``` )
- url: String
- blank: ```true | false``` (True will open a new browser tab)
- click: Function (click callback function)
- disabled:
- String: ```true | false```
- Function: (Function must return boolean value)


  • styles(properties): add styles to menus
- properties: Acceptable css properties object ( like ```{ "background-color": "#ffe", "border-left": "5px solid #ccc" }```)
- [left, top] : Optional, set menu fixed position left and top, (like ```[e.pageX, e.pageY])```, unit is unnecessary)
  • hide(): hide menus