Menu

ion-menu

Improve this doc

The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types. The menu element should be a sibling to the app's content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the MenuController.

Usage

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

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

To add a menu to an app, the <ion-menu> element should be added as a sibling to the ion-nav it will belong to. A local variable should be added to the ion-nav and passed to the ion-menus content property.

This tells the menu what it is bound to and what element to watch for gestures. In the below example, content is using property binding because mycontent is a reference to the <ion-nav> element, and not a string.

Opening/Closing Menus

There are several ways to open or close a menu. The menu can be toggled open or closed from the template using the MenuToggle directive. It can also be closed from the template using the MenuClose directive. To display a menu programmatically, inject the MenuController provider and call any of the MenuController methods.

Menu Types

The menu supports several display types: overlay, reveal and push. By default, it will use the correct type based on the mode, but this can be changed. The default type for both Material Design and Windows mode is overlay, and reveal is the default type for iOS mode. The menu type can be changed in the app's config via the menuType property, or passed in the type property on the <ion-menu> element. See usage below for examples of changing the menu type.

Navigation Bar Behavior

If a MenuToggle button is added to the Navbar of a page, the button will only appear when the page it's in is currently a root page. The root page is the initial page loaded in the app, or a page that has been set as the root using the setRoot method on the NavController.

For example, say the application has two pages, Page1 and Page2, and both have a MenuToggle button in their navigation bars. Assume the initial page loaded into the app is Page1, making it the root page. Page1 will display the MenuToggle button, but once Page2 is pushed onto the navigation stack, the MenuToggle will not be displayed.

Persistent Menus

Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack. To make a menu persistent set persistent to true on the <ion-menu> element. Note that this will only affect the MenuToggle button in the Navbar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected.

Menu Side

By default, menus slide in from the left, but this can be overridden by passing right to the side property:

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

Menu Type

The menu type can be changed by passing the value to type on the <ion-menu>:

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

It can also be set in the app's config. The below will set the menu type to push for all modes, and then set the type to overlay for the ios mode.

// in NgModules

imports: [
  IonicModule.forRoot(MyApp,{
    menuType: 'push',
    platforms: {
      ios: {
        menuType: 'overlay',
      }
    }
  })
],

Displaying the Menu

To toggle a menu from the template, add a button with the menuToggle directive anywhere in the page's template:

<button ion-button menuToggle>Toggle Menu</button>

To close a menu, add the menuClose button. It can be added anywhere in the content, or even the menu itself. Below it is added to the menu's content:

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

See the MenuToggle and MenuClose docs for more information on these directives.

The menu can also be controlled from the Page by using the MenuController. Inject the MenuController provider into the page and then call any of its methods. In the below example, the openMenu method will open the menu when it is called.

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

@Component({...})
export class MyPage {
 constructor(public menuCtrl: MenuController) {}

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

See the MenuController API docs for all of the methods and usage information.

Input Properties

Output Events

Sass Variables

Related

Menu Component Docs, MenuController API Docs, Nav API Docs, NavController API Docs