🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple AngularJS directive for creating multi-level vertical accordion menu for your web applications.

Menu_Navigation Plugins

Documentation

angular-vertical-menu

Build Status Commitizen friendly

Simple vertical menu.

Demo

As demo is worth a thousand words, check it out demo

Installation

Bower :

$ bower angular-vertical-menu --save

Usage

<vertical-menu config="my-config"></vertical-menu>

Json Config Object Schema

{     "$schema": "http://json-schema.org/draft-04/schema#",     "id": "http://jsonschema.net",     "type": "object",     "definitions": {         "label": {             "description": "Label of the menu item",             "type": "string",             "optional": false         },         "icon": {             "description": "Name of a Font Awesome icon",             "type": "string",             "optional": false         },         "href": {             "description": "Angular route path or url",             "type": "string",             "optional": false         },         "callback": {             "description": "Callback function called when the item is activated. The callback function receive the underlying item object as the first argument.",             "type": "string"         }     },     "properties": {         "default": {             "type": "object",             "properties": {                 "icon": {                     "$ref": "#/definitions/icon"                 }             }         },         "animation": {             "description": "Customization of the animation. If not defined default parameters duration(0.4) and timing(ease) are used.",             "type": "object",             "properties": {                 "duration": {                     "description": "Duration of the animation",                     "type": "number",                     "optional": false                 },                 "timing": {                     "description": "The timing function to use for the animation",                     "type": "string",                     "optional": false                 }             }         },         "data": {             "description": "Declare the structure of menu",             "type": "array",             "items": {                 "description": "First level menu item",                 "type": "object",                 "properties": {                     "label": {                         "$ref": "#/definitions/label"                     },                     "icon": {                         "$ref": "#/definitions/icon"                     },                     "badge": {                         "description": "A value to be displayed as a badge",                         "type": "string"                     },                     "oneOf": [                         "href": {                             "$ref": "#/definitions/href"                         },                         "callback": {                             "$ref": "#/definitions/callback"                         },                         {                             "required": [                                 "href"                             ]                         },                         {                             "required": [                                 "callback"                             ]                         }                     ],                     "children": {                         "description": "List of sub items",                         "type": "array",                         "items": {                             "description": "Second level item",                             "type": "object",                             "properties": {                                 "label": {                                     "$ref": "#/definitions/label"                                 },                                 "icon": {                                     "$ref": "#/definitions/icon"                                 },                                 "oneOf": [                                     "href": {                                         "$ref": "#/definitions/href"                                     },                                     "callback": {                                         "$ref": "#/definitions/callback"                                     },                                     {                                         "required": [                                             "href"                                         ]                                     },                                     {                                         "required": [                                             "callback"                                         ]                                     }                                 ]                             },                             "required": [                                 "label"                             ],                             "additionalProperties": false                         }                     }                 },                 "required": [                     "label"                 ],                 "additionalProperties": false             }         }     } }

Dependencies

  • AngularJS - HTML enhanced for web apps!
  • Bootstrap - sleek, intuitive, and powerful front-end framework
  • Font Awesome - the iconic font and CSS toolkit

Development

Clone the project

git clone https://github.com/gnavarro77/angular-vertical-menu.git

Build

gulp build-js gulp build-css

Run tests

gulp test

Run demo

gulp serve-demo

Build demo

gulp build-demo

License

MIT


You May Also Like