<ion-menucontentId="main-content"> <ion-header> <ion-toolbar> <ion-title>Menu Content</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the menu content.</ion-content> </ion-menu> <divclass="ion-page"id="main-content"> <ion-header> <ion-toolbar> <ion-buttonsslot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content> </div>
Menus are displayed on the "start" side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the "end" side, which is the opposite of "start".
If menus on both sides are needed in an app, the menu can be opened by passing the side value to the open method on MenuController. If a side is not provided, the menu on the "start" side will be opened. See the multiple menus section below for an example using MenuController.
<ion-menuside="end"contentId="main-content"> <ion-header> <ion-toolbar> <ion-title>Menu Content</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the menu content.</ion-content> </ion-menu> <divclass="ion-page"id="main-content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> <ion-buttonsslot="end"> <ion-menu-button></ion-menu-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content> </div>
When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the enable method on the MenuController. We can then call open on a menu based on its menuId or side.
src/app/example.component.html
src/app/example.component.ts
<ion-menumenuId="first-menu"contentId="main-content"> <ion-header> <ion-toolbar> <ion-title>First Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the first menu content.</ion-content> </ion-menu> <ion-menumenuId="second-menu"contentId="main-content"> <ion-header> <ion-toolbar> <ion-title>Second Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the second menu content.</ion-content> </ion-menu> <ion-menuside="end"contentId="main-content"> <ion-header> <ion-toolbar> <ion-title>End Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the end menu content.</ion-content> </ion-menu> <divclass="ion-page"id="main-content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding"> <p>Tap a button below to open a specific menu.</p> <ion-buttonexpand="block"(click)="openFirstMenu()">Open First Menu</ion-button> <ion-buttonexpand="block"(click)="openSecondMenu()">Open Second Menu</ion-button> <ion-buttonexpand="block"(click)="openEndMenu()">Open End Menu</ion-button> </ion-content> </div>
import{ Component }from'@angular/core'; import{ MenuController }from'@ionic/angular'; @Component({ selector:'app-example', templateUrl:'example.component.html', }) exportclassExampleComponent{ constructor(private menuCtrl: MenuController){} openFirstMenu(){ // Open the menu by menu-id this.menuCtrl.enable(true,'first-menu'); this.menuCtrl.open('first-menu'); } openSecondMenu(){ // Open the menu by menu-id this.menuCtrl.enable(true,'second-menu'); this.menuCtrl.open('second-menu'); } openEndMenu(){ // Open the menu by side this.menuCtrl.open('end'); } }
<ion-app> <ion-menucontentId="main-content"> <ion-header> <ion-toolbarcolor="tertiary"> <ion-title>Menu Content</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding">This is the menu content.</ion-content> </ion-menu> <divclass="ion-page"id="main-content"> <ion-header> <ion-toolbar> <ion-buttonsslot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-contentclass="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content> </div> </ion-app>