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

All

Property Default Description
$font-size-root 62.5%

Font size of the root html

$headings-font-weight 500

Font weight of all headings

$headings-line-height 1.2

Line height of all headings

$h1-font-size 2.6rem

Font size of heading level 1

$h2-font-size 2.4rem

Font size of heading level 2

$h3-font-size 2.2rem

Font size of heading level 3

$h4-font-size 2rem

Font size of heading level 4

$h5-font-size 1.8rem

Font size of heading level 5

$h6-font-size 1.6rem

Font size of heading level 6

$include-responsive-utilities true

Whether to include all of the responsive utility attributes

$include-text-alignment-utilities $include-responsive-utilities

Whether to include all of the responsive text alignment attributes

$include-text-transform-utilities $include-responsive-utilities

Whether to include all of the responsive text transform attributes

$include-float-element-utilities $include-responsive-utilities

Whether to include all of the responsive float attributes

$screen-breakpoints ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px )

The minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries

Related

Menu Component Docs, Menu API Docs

API

Native

General