Ionic 2.x/3.x - Ionic Material Sidemenu

Ionic 2.x/3.x - Ionic Material Sidemenu

Add a material design menu to your Ionic 2 application with only a few lines of code.


Iclic Labs

Iclic Labs

Member since 2014


iOS, Android  
4 years ago
4 years ago
drawer, sidemenu, menu, material, design, iclic labs, iclic, ionic2, ionic3,

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.

Plugin by

This plugin is compatible with Ionic v2.x and v3.x!


Add a beautiful material design menu to your Ionic 2 application. This plugin works on iOS, Android and Windows Phone and respects the material design guidelines. You can easily customize the cover header, the profile picture and the entries with only a few lines of code.

Test Before You Buy

You can test the app using Ionic View and enter the app id 4d800893.


  1. Works with iOS, Android and Windows Phone.
  2. Easy to include in your existing app.
  3. Follows the Material Design Guidelines.
  4. Easily custom the background color, the text color and the buttons.
  5. Comes with a full and detailed example.
  6. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.


  1. Copy the app/components/ion-material-sidemenu.ts file into your app directory
  2. Import IonMaterialSidemenu component and add it to the declarations list in the app/app.module.ts file
  3. Copy the assets from the app/assets/ directory into your app/assets/ directory

That's all!


  1. in your app.html, add <ion-material-sidemenu [options]="menuOptions"></ion-material-sidemenu> in your ion-content, the parameter options is an IonMaterialSidemenuOptions where you set the username, the email, the background, the profile picture and the menu entries.

That's all. Here is an example of the app.html file, very simple. Just include the ion-material-sidemenu component:



Here is a simple example:

``` import { Component, ViewChild } from '@angular/core'; import { Nav, Platform, MenuController, Events } from 'ionic-angular'; import { StatusBar, Splashscreen } from 'ionic-native'; import { Page1 } from '../pages/page1/page1'; import { IonMaterialSidemenuOptions } from '../components/ion-material-sidemenu';

@Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav;

rootPage: any = Page1;

menuOptions: IonMaterialSidemenuOptions;

constructor(public platform: Platform, public menuCtrl: MenuController, public events: Events) { this.initializeApp(); let _t = this; //keep a reference

// initialize the menu
this.menuOptions = {
  header: {
    background: '#ccc url(./assets/menu_bg1.jpg) no-repeat top left / cover',
    picture: '',
    username: 'Iclic Labs - Gmail',
    email: '[email protected]',
  entries: [
    { title: 'Inbox', leftIcon: 'mail', onClick: () => { _t.nav.setRoot(Page1) } },
    { title: 'Labels', isDivider: true },
    { title: 'Sent mail', leftIcon: 'send', onClick: () => { _t.nav.setRoot(Page1) } }

} }; ```

Menu item with a right icon:

{ title: 'Label', leftIcon: 'square-outline', rightIcon: 'ios-arrow-forward', onClick: () => { _t.nav.setRoot(Page1) } }

Menu item with a badge:

{ title: 'Label', leftIcon: 'square-outline', badge: { text: '3', color: 'secondary' }, onClick: () => { _t.nav.setRoot(Page1) } }

Menu item with a custom CSS class:

{ title: 'Label', leftIcon: 'square-outline', classes: 'my-custom-css-class', onClick: () => { _t.nav.setRoot(Page1) } }

Menu item selected:

{ isSelected: true, title: 'Label', leftIcon: 'bookmarks', onClick: () => { _t.nav.setRoot(Page1) } }

Menu divider without text:

{ isDivider: true }

Menu divider with text:

{ isDivider: true, title: 'Divider' }

Click on cover header:

header: { background: '#ccc url(./assets/menu_bg2.jpg) no-repeat top left / cover', picture: '', username: 'Iclic Labs - Google Keep Menu', email: '[email protected]', onClick: () => { alert('menu header clicked'); } }

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at