angular-material-multilevel-menu

    1.5.2 • Public • Published

    angular-material-multilevel-menu

    Material Multi-Level Menu for AngularJS

    Demo

    View online demo

    Main features

    • Breadcrumb
    • Interface with angular-route if available

    Install

    Download the package:

    yarn add angular-material-multilevel-menu
    

    Dependencies

    TODO

    Usage

    In your document head, include:

    <link rel="stylesheet" href="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.css" />

    Use the md-multi-level-menu where you wish:

    <md-multi-level-menu md-title="Menu"
                         md-back="Back"
                         md-style="replace">
    </md-multi-level-menu>

    Then, just before close body tag, include:

    <script src="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.js"></script>

    Include the module in your application:

    var application = angular.module('Application', ['ngMdMultiLevelMenu']);

    Configure the items:

    application.config(['menuProvider', function(menuProvider) {
       menuProvider.items([{
          label: 'Item 1',
          icon: 'amazon',
          items: [{
             label: 'Item 1.1',
             link: 'item-1-1',
             icon: 'apple'
          }, {
             label: 'Item 1.2',
             link: 'item-1-2',
             icon: 'facebook'
          }]
       }, {
          label: 'Item 2',
          link: 'item-2',
          icon: 'windows'
       }, {
          label: 'Item 3',
          icon: 'google-plus',
          items: [{
             label: 'Item 3.1',
             link: 'item-3-1',
             icon: 'twitter'
          }, {
             label: 'Item 3.2',
             icon: 'github-box',
             items: [{
                label: 'Item 3.2.1',
                link: 'item-3-2-1',
                icon: 'whatsapp'
             }, {
                label: 'Item 3.2.2',
                icon: 'office',
                items: [{
                   label: 'Item 3.2.2.1',
                   link: 'item-3-2-2-1',
                   icon: 'hangouts'
                }]
             }]
          }]
       }, {
          label: 'Item 4',
          link: 'item-4',
          icon: 'linkedin'
          hidden: false
       }]);
    }]);

    Finally, in your controller, configure the select callback of $menu service to handle the links:

    application.controller('Controller', ['$menu', function($menu) {
       $menu.callback(function(item) {
          console.log('You are going to', item.link);
       });
    }]);

    Development install

    git clone https://github.com/jmouriz/angular-material-multilevel-menu.git
    cd angular-material-multilevel-menu
    yarn install
    cd source
    make
    

    TODO

    Keywords

    none

    Install

    npm i angular-material-multilevel-menu

    DownloadsWeekly Downloads

    34

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    27.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • jmouriz