Skip to main content
Version: v5

ion-menu

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

Usage​

<ion-menu side="start" menuId="first" contentId="main">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
  <ion-header>
    <ion-toolbar color="tertiary">
      <ion-title>Custom Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu side="end" type="push" contentId="main">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="main"></ion-router-outlet>
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['./menu-example.css'],
})
export class MenuExample {
  constructor(private menu: MenuController) {}

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end');
  }

  openCustom() {
    this.menu.enable(true, 'custom');
    this.menu.open('custom');
  }
}
.my-custom-menu {
  --width: 500px;
}

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​

Descriptiontrueの場合、メニューは無効化される。
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
DescriptionメニューのIDです。
Attributemenu-id
Typestring ｜ undefined
Defaultundefined

side​

Descriptionメニューがビューのどの側に配置されるべきか。
Attributeside
Type"end" ｜ "start"
Default'start'

swipeGesture​

Descriptiontrueの場合、スワイプによるメニュー操作が有効になる。
Attributeswipe-gesture
Typeboolean
Defaulttrue

type​

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

Events​

NameDescription
ionDidCloseメニューが閉じられたときに発行されます。
ionDidOpenメニューが開いているときに発行されます。
ionWillCloseメニューが閉じられようとするときに発行されます。
ionWillOpenメニューが開かれようとするときに発行されます。

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​

Descriptionメニューが開いている場合は true を返します。
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
backdropメニューを開いているときに、メインコンテンツの上に表示される背景です。
containerメニューの内容を格納するコンテナです。

CSS Custom Properties​

NameDescription
--backgroundメニューの背景
--heightメニューの高さ
--max-heightメニューの最大の高さ
--max-widthメニューの最大幅
--min-heightメニューの高さの最小値
--min-widthメニューの最小幅
--widthメニューの幅

Slots​

No slots available for this component.

View Source