Cuppa Angular Fan Menu is an angular directive for cool menu componet for web and mobile , developed using `angularJS`, `CSS3`, `HTML5`.


  • Highly Configurable directive properties and methods
  • Draggable
  • Touch enabled
  • Cool fan effect transitions

Getting Started


  • Install with npm: npm install cuppa-angular-datepicker

  • Clone this repository and setup with the below instructions.

Basic Usage

Include circularmenu-directive.js directive at the bottom of your page or in the <head> section.

<script src="circularmenu-directive.js" type="text/javascript"></script>

Initialize the directive by adding the directive name as a dependency to your app controller and declare the config object and menu items model as follows

  .module('demoApp', ['circularMenu-directive'])
    $scope.menuConfig = {
      "buttonWidth": 60,
      "menuRadius": 160,
      "color": "#ff7f7f",
      "textColor": "#ffffff",
      "gutter": {
        "top": 130,
        "right": 30,
        "bottom": 30,
        "left": 30
      "angles": {
        "topLeft": 0,
        "topRight": 90,
        "bottomRight": 180,
        "bottomLeft": 270
    $scope.menuItems = [{
      "title": "iPad",
      "color": "#ea2a29",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-tablet","size": 35}
    }, {
      "title": "iMac",
      "color": "#f16729",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-laptop","size": 30}
    }, {
      "title": "iPhone",
      "color": "#f89322",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-mobile","size": 30}
    }, {
      "title": "iWatch",
      "color": "#ffcf14",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-clock-o","size": 30}

Add the directive attribute and the corresponding config attributes to the html template or page of your app.

 <div drag-circular-menu 

API Documentation

Directive Configuration

Once the directive attribute is added to the element, it can be configured with the following configuration attributes.

Attribute Type Required Default Description
drag-circular-menu attribute YES '' Directive attribute to be defined on an element to initialize.
angle string YES 30 The angle at which the menu wings open when clicked.
placement string YES topLeft Position at the which the menu appears on load. Possible values are topLeft, topRight, bottomLeft,bottomRight
button-config Object YES None Menu button configuration Object. Set of button properties to be defined. Refer to Config Object Section below for details.
menu-items Array [Object] YES none Array of menu item objects. Each menu is an object. Refer to the Data Array - Menu Item Object Properties below for details.
default-open Boolean YES '' Open menu automatically on load.
onwing-click Method YES '' Callback on menu item wing cicked.

Config Object

Property Type Required Description
buttonWidth Number YES Width of the menu button.
menuRadius Number YES The radius of the menu wings from the center of the button.
color Hex Code YES Button color. Hex color code.
offset Number YES The gap between the menu button and the menu item wings.
textColor Hex Code YES Button text color. Hex color code.
showIcons Boolean YES To show or hide icons along with the text in menu item wing.
gutter Object YES The space between the menu and the bounderies of the page window. The object can have four properties left, right, top, bottom with values to be defined in Number
angles Object YES The angle at which the menu opens when clicked. It can be configured to open at different angles when placed at different places. The value of the angle can be a number between 0 -360

Data Array

  • menuItems - Arryay [menuObject]

  • menuObject {} properties

Property Type Required Description
title String YES Title of the menu item.
color Hex Code YES Background color of the wing.
rotate Number YES Initial angle of the wing. Default to Zero.
show Boolean YES Show or hide the wing.
titleColor Hex Code YES Text color of the title.
icon Object YES Icon object properties. {“color”:”#fff”,”name”:”fa fa-tablet”,”size”: 35}

Build & development

If you want develope and build on this component, there are some quick steps for that.

  • clone the git repository to your local
  • run npm install to download and install all the development dependencies.
  • run bowerinstall to download all the front end developemnt dependencies.
  • run grunt serve to start the server and get the app up and running. It automatically opens a browser window instance, with the app runnning.
  • run grunt build to generate production ready code in dist folder.


This project is licensed under the MIT license. See the LICENSE file for more info.

The MIT License (MIT) Copyright (c) 2016 Cuppa Labs


Thanks to Font Awesome the library.

Pradeep Terli

Web UI Developer, Blogger, Thinker , Entrepreneur. Loves to explore technology with focus on web technologies.