Skip to main content
Version: v7

ion-menu

shadow

The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, 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 root 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.

Basic Usage

The menu toggle component can be used to create custom button that can open or close the menu.

The type property can be used to customize how menus display in your application.

Menus are displayed on the "start" side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the "end" side, which is the opposite of "start".

If menus on both sides are needed in an app, the menu can be opened by passing the side value to the open method on MenuController. If a side is not provided, the menu on the "start" side will be opened. See the multiple menus section below for an example using MenuController.

Multiple Menus

When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the enable method on the MenuController. We can then call open on a menu based on its menuId or side.

Theming

CSS Shadow Parts

Interfaces

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface MenuCustomEvent<T = any> extends CustomEvent {
detail: T;
target: HTMLIonMenuElement;
}

Properties

contentId

DescriptionThe id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu.
Attributecontent-id
Typestring | undefined
Defaultundefined

disabled

DescriptionIf true, the menu is disabled.
Attributedisabled
Typeboolean
Defaultfalse

maxEdgeStart

DescriptionThe edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
Attributemax-edge-start
Typenumber
Default50
DescriptionAn id for the menu.
Attributemenu-id
Typestring | undefined
Defaultundefined

side

DescriptionWhich side of the view the menu should be placed.
Attributeside
Type"end" | "start"
Default'start'

swipeGesture

DescriptionIf true, swiping the menu is enabled.
Attributeswipe-gesture
Typeboolean
Defaulttrue

type

DescriptionThe display type of the menu. Available options: "overlay", "reveal", "push".
Attributetype
Typestring | undefined
Defaultundefined

Events

NameDescription
ionDidCloseEmitted when the menu is closed.
ionDidOpenEmitted when the menu is open.
ionWillCloseEmitted when the menu is about to be closed.
ionWillOpenEmitted when the menu is about to be opened.

Methods

close

DescriptionCloses the menu. If the menu is already closed or it can't be closed, it returns false.
Signatureclose(animated?: boolean) => Promise<boolean>

isActive

DescriptionReturns true is the menu is active.

A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a ion-split-pane.
SignatureisActive() => Promise<boolean>

isOpen

DescriptionReturns true is the menu is open.
SignatureisOpen() => Promise<boolean>

open

DescriptionOpens the menu. If the menu is already open or it can't be opened, it returns false.
Signatureopen(animated?: boolean) => Promise<boolean>

setOpen

DescriptionOpens or closes the button. If the operation can't be completed successfully, it returns false.
SignaturesetOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>

toggle

DescriptionToggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns false.
Signaturetoggle(animated?: boolean) => Promise<boolean>

CSS Shadow Parts

NameDescription
backdropThe backdrop that appears over the main content when the menu is open.
containerThe container for the menu content.

CSS Custom Properties

NameDescription
--backgroundBackground of the menu
--heightHeight of the menu
--max-heightMaximum height of the menu
--max-widthMaximum width of the menu
--min-heightMinimum height of the menu
--min-widthMinimum width of the menu
--widthWidth of the menu

Slots

No slots available for this component.