Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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.

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: Promise

returns a promise when the menu is fully closed

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.

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

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.

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: Menu

Returns the instance of the menu if found, otherwise null.

getMenus()

Returns: Array<Menu>

Returns an array of all menu instances.

getOpen()

Returns: Menu

Returns the instance of the menu already opened, otherwise null.

isEnabled(menuId)

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: boolean

Returns true if the menu is currently enabled, otherwise false.

isOpen(menuId)

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: boolean

Returns true if the specified menu is currently open, otherwise false. If the menuId is not specified, it returns true if ANY menu is currenly open.

open(menuId)

Programatically open the Menu.

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: Promise

returns a promise when the menu is fully opened

swipeEnable(shouldEnable, menuId)

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

Param Type Details
shouldEnable boolean

True if it should be swipe-able, false if not.

menuId string

Optionally get the menu by its id, or side.Optional

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

toggle(menuId)

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

Param Type Details
menuId string

Optionally get the menu by its id, or side.Optional

Returns: Promise

returns a promise when the menu has been toggled

Sass Variables

Property Default Description
$menu-width 304px

Width of the menu

$menu-small-width $menu-width - 40px

Width of the menu on small devices (under 340px)

Property Default Description
$menu-ios-background $background-ios-color

Background of the menu

$menu-ios-box-shadow-color rgba(0, 0, 0, .25)

Box shadow color of the menu

$menu-ios-box-shadow 0 0 10px $menu-ios-box-shadow-color

Box shadow of the menu

Property Default Description
$menu-md-background $background-md-color

Background of the menu

$menu-md-box-shadow-color rgba(0, 0, 0, .25)

Box shadow color of the menu

$menu-md-box-shadow 0 0 10px $menu-md-box-shadow-color

Box shadow of the menu

Property Default Description
$menu-wp-background #f2f2f2

Background of the menu

Related

Menu Component Docs, Menu API Docs

API

Native

General