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

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.

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.

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

Attr Type Details
content any

A reference to the content element the menu should use.

enabled boolean

If true, the menu is enabled. Default true.

id string

An id for the menu.

persistent boolean

If true, the menu will persist on child pages.

side string

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

swipeEnabled boolean

If true, swiping the menu is enabled. Default true.

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

Output Events

Attr Details
ionClose

Emitted when the menu has been closed.

ionDrag

Emitted when the menu is being dragged open.

ionOpen

Emitted when the menu has been opened.

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

API

Native

General