Angular Material Sidemenu
Introduction
This is a package to create navigation menus using Angular Material. This follows all the design guidelines provided by Google Material spec.
Installation
This package can be installed using npm or bower:
Note: Use version 1.0.5
npm install angular-material-sidemenu
bower install angular-material-sidemenu
Usage
Include the script and CSS files in you HTML and add ngMaterialSidemenu
in you module. Also this module has support for browserify or wiredep.
To use icons with ligatures you should include the reference for the Material Icons:
After that you can add the following markup:
Caption Submenu 1 Submenu 2 Submenu 3 Submenu 1 Submenu 2 Submenu 1 Submenu 2 Submenu 3 Caption Menu 4
Components
-
<md-sidemenu>
Is the main directive to hold all navigation items. -
<md-sidemenu-group>
Is needed to create groups of content. -
<md-sidemenu-content>
Define the collapsible navigation element and there's some attributes to setup. The following attributes are available:
collapse-other
- You can use to collapse all other elements.on-hover
- You can open menu content on hover.md-icon
- You can use font iconsmd-svg-icon
- To use external svg iconsmd-heading
- The title of the sectionmd-arrow
- An optional boolean to show an indicator arrow
<md-sidemenu-button>
Add the buttons inside the navigation. The following attributes are available:
href
- The href for the buttonui-sref
- The ui-router alternativeui-sref-active
- The highlight class to use with ui-routertarget
- The link target attribute
Pretty easy!
License
MIT