Menu

Improve this doc

Menu is a side-menu interface that can be dragged and toggled to open or close. An Ionic app can have numerous menus, all of which can be controlled within template HTML, or programmatically.

Usage

In order to use Menu, you must specify a reference to the content element that Menu should listen on for drag events, using the content property. This is telling the menu which content the menu is attached to, so it knows which element to move over, and to respond to drag events. Note that a menu is a sibling to its content.

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

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

By default, Menus are on the left, but this can be overridden with the side property:

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

Programmatic Interaction

To programmatically interact with any menu, you can inject the MenuController provider into any component or directive. This makes it easy get ahold of and control the correct menu instance. By default Ionic will find the app's menu without requiring a menu ID.

import{Page, MenuController} from 'ionic-angular';
@Page({...})
export class MyPage {
 constructor(menu: MenuController) {
   this.menu = menu;
 }

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

}

Note that if you want to easily toggle or close a menu just from a page's template, you can use menuToggle and/or menuClose to accomplish the same tasks as above.

Apps With Left And Right Menus

For apps with a left and right menu, you can control the desired menu by passing in the side of the menu.

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

openLeftMenu() {
  this.menu.open('left');
}

closeRightMenu() {
  this.menu.close('right');
}

Apps With Multiple, Same Side Menus

Since more than one menu on a the same side is possible, and you wouldn't want both to be open at the same time, an app can decide which menu should be enabled. For apps with multiple menus on the same side, it's required to give each menu a unique ID. In the example below, we're saying that the left menu with the authenticated id should be enabled, and the left menu with the unauthenticated id 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.menu.enable(true, 'authenticated');
  this.menu.enable(false, 'unauthenticated');
}

Note that if an app only had one menu, there is no reason to pass a menu id.

Menu Types

Menu supports two display types: overlay, reveal and push. Overlay is the traditional Material Design drawer type, and Reveal is the traditional iOS type. By default, menus will use to the correct type for the platform, but this can be overriden using the type property:

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

Persistent Menus

By default, menus, and specifically their menu toggle buttons in the navbar, only show on the root page within its NavController. For example, on Page 1 the menu toggle will show in the navbar. However, when navigating to Page 2, because it is not the root Page for that NavController, the menu toggle will not show in the navbar.

Not showing the menu toggle button in the navbar is commonly seen within native apps after navigating past the root Page. However, it is still possible to always show the menu toggle button in the navbar by setting persistent="true" on the ion-menu component.

<ion-menu persistent="true" [content]="content">...</ion-menu>

Instance Members

open()

Progamatically open the Menu.

close(menuId)

Progamatically 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.

toggle(menuId)

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

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.

swipeEnable(shouldEnable, menuId)

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

isOpen()

isEnabled()

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()

Related

Menu Component Docs, Navigation Component Docs, Nav API Docs