Es simple, crea un nuevo componente en la vista (HTML) y agrega lo siguiente:
<ion-menu [content]='content'> <ion-header> <ion-toolbar> <ion-title>Pages</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button menuClose ion-item> Opcion 1 </button> <button menuClose ion-item> Opcion 2 </button> </ion-list> </ion-content> </ion-menu> <ion-nav id='nav' #content [root]='rootPage'></ion-nav>
Y esto en el archivo ‘.ts’:
import { Component } from @angular/core; import { NavController } from ionic-angular; import { HomePage } from ../home/home; @Component({ templateUrl: menu.html, }) export class MenuPage { public rootPage: any; constructor(private navCtrl: NavController) { this.rootPage = HomePage; } }
Para utilizarlo en otro componente solo tendrás que agregar un botón con la propiedad menuToggle de esta manera:
<button ion-button icon-only menuToggle> <ion-icon name='menu'></ion-icon </button>