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.

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.

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.

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.

Usage

To add a menu to an application, the <ion-menu> element should be added as a sibling to the content it belongs to. A local variable should be added to the content element and passed to the menu element in the content property. This tells the menu which content it is attached to, so it knows which 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.

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

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

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>

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>
      <button ion-button menuClose ion-item detail-none>Close Menu</button>
    </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

Attr Type Details
content any

A reference to the content element the menu should use.

id string

An id for the menu.

side string

Which side of the view the menu should be placed. Default "left".

type string

The display type of the menu. Default varies based on the mode, see the menuType in the config. Available options: "overlay", "reveal", "push".

enabled boolean

Whether or not the menu should be enabled. Default true.

swipeEnabled boolean

Whether or not swiping the menu should be enabled. Default true.

persistent string

Whether or not the menu should persist on child pages. Default false.

Output Events

Attr Details
ionDrag

When the menu is being dragged open.

ionOpen

When the menu has been opened.

ionClose

When the menu has been closed.

Sass Variables

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, MenuController API Docs, Nav API Docs, NavController API Docs

API

Native

General