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
