Menu

Improve this doc

Component

selector: ion-menu

Instance Members

setOpen(shouldOpen)

Sets the state of the Menu to open or not.

Param Type Details
shouldOpen boolean

If the Menu is open or not.

Returns: Promise

returns a promise once set

open()

Progamatically open the Menu.

Returns: Promise

returns a promise when the menu is fully opened.

close()

Progamatically close the Menu.

Returns: Promise

returns a promise when the menu is fully closed.

toggle()

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

Returns: Promise

returns a promise when the menu has been toggled.

enable(shouldEnable)

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

True if it should be enabled, false if not.

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

swipeEnable(shouldEnable)

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.

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

ode>overlay</code>, 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:</p>

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

Returns: Promise

returns a promise when the menu is fully opened

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.

Param Type Details
menuId string

Optionally get the menu by its id, or side.

Returns: Promise

returns a promise when the menu is fully closed

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.

Returns: Promise

returns a promise when the menu has been toggled

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.

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

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.

Returns: Menu

Returns the instance of the menu, which is useful for chaining.

isOpen()

Returns: boolean

Returns true if the menu is currently open, otherwise false.

isEnabled()

Returns: boolean

Returns true if the menu is currently enabled, otherwise false.

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.

Returns: Menu

Returns the instance of the menu if found, otherwise null.

getMenus()

Returns: Array<Menu>

Returns an array of all menu instances.

Related

Menu Component Docs, Navigation Component Docs, Nav API Docs

API

Native

General