MenuController

Improve this doc

The MenuController is a provider which makes it easy to control a Menu. Its methods can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, id, or, if neither of these are passed to it, it will grab the first menu it finds.

Usage

Add a basic menu component to start with. See the Menu API docs for more information on adding menu components.

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
    ...
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

To call the controller methods, inject the MenuController provider into the page. Then, create some methods for opening, closing, and toggling the menu.

import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

@Component({...})
export class MyPage {

 constructor(public menuCtrl: MenuController) {

 }

 openMenu() {
   this.menuCtrl.open();
 }

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }

}

Since only one menu exists, the MenuController will grab the correct menu and call the correct method for each.

Multiple Menus on Different Sides

For applications with both a left and right menu, the desired menu can be grabbed by passing the side of the menu. If nothing is passed, it will default to the "left" menu.

<ion-menu side="left" [content]="mycontent">...</ion-menu>
<ion-menu side="right" [content]="mycontent">...</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>

toggleLeftMenu() {
  this.menuCtrl.toggle();
}

toggleRightMenu() {
  this.menuCtrl.toggle('right');
}

Multiple Menus on the Same Side

An application can have multiple menus on the same side. In order to determine the menu to control, an id should be passed. In the example below, the menu with the authenticated id will be enabled, and the menu with the unauthenticated id will be disabled.

<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>

enableAuthenticatedMenu() {
  this.menuCtrl.enable(true, 'authenticated');
  this.menuCtrl.enable(false, 'unauthenticated');
}

Note: if an app only has one menu, there is no reason to pass an id.

Instance Members

close(menuId)

Programatically close the Menu. If no menuId is given as the first argument then it’ll close any menu which is open. If a menuId is given then it’ll close that exact menu.

enable(menuId)

Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side.

get(menuId)

Used to get a menu instance. If a menuId is not provided then it’ll return the first menu found. If a menuId is left or right, then it’ll return the enabled menu on that side. Otherwise, if a menuId is provided, then it’ll try to find the menu using the menu’s id property. If a menu is not found then it’ll return null.

getMenus()

getOpen()

isEnabled(menuId)

isOpen(menuId)

open(menuId)

Programatically open the Menu.

swipeEnable(shouldEnable, menuId)

Used to enable or disable the ability to swipe open the menu.

toggle(menuId)

Toggle the menu. If it’s closed, it will open, and if opened, it will close.

Sass Variables

Related

Menu Component Docs, Menu API Docs