ion-menu-toggle

shadow

Contents

• Usage
• Properties
• Events
• Methods
• CSS Shadow Parts
• CSS Custom Properties
• Slots
• autoHide

The MenuToggle component can be used to toggle a menu open or closed.

By default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.

In case it's desired to keep ion-menu-toggle always visible, the autoHide property can be set to false.

Usage

Angular

<ion-app>
  <ion-menu side="start" menuId="first" contentId="main">
    <ion-header>
      <ion-toolbar color="secondary">
        <ion-title>Example Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <div class="ion-page" id="main">
    <ion-content class="ion-padding">
      <ion-menu-toggle>
        <ion-button>Toggle Menu</ion-button>
      </ion-menu-toggle>
    </ion-content>
  </div>
</ion-app>

Javascript

<ion-app>
  <ion-menu side="start" menu-id="first" content-id="main">
    <ion-header>
      <ion-toolbar color="secondary">
        <ion-title>Example Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <div class="ion-page" id="main">
    <ion-content class="ion-padding">
      <ion-menu-toggle>
        <ion-button>Toggle Menu</ion-button>
      </ion-menu-toggle>
    </ion-content>
  </div>
</ion-app>

React

import React from 'react';
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react';

export const MenuExample: React.FC = () => (
  <>
    <IonMenu side="start" menuId="first" contentId="main">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Example Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>
    <IonPage id="main">
      <IonContent>
        <IonMenuToggle>
          <IonButton>Toggle Menu</IonButton>
        </IonMenuToggle>
      </IonContent>
    </IonPage>
  </>
);

Vue

<template>
  <ion-menu side="start" menu-id="first" content-id="main">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Example Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <div class="ion-page" id="main">
    <ion-content>
      <ion-menu-toggle>
        <ion-button>Toggle Menu</ion-button>
      </ion-menu-toggle>
    </ion-content>
  </div>
</template>

<script>
import { 
  IonContent, 
  IonHeader, 
  IonItem, 
  IonList, 
  IonMenu, 
  IonMenuToggle,
  IonButton,
  IonTitle, 
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonContent, 
    IonHeader, 
    IonItem, 
    IonList, 
    IonMenu, 
    IonMenuToggle,
    IonButton,
    IonTitle, 
    IonToolbar
  }
});
</script>

Properties

autoHide

Description	Automatically hides the content when the corresponding menu is not active. By default, it's true. Change it to false in order to keep ion-menu-toggle always visible regardless the state of the menu.
Attribute	auto-hide
Type	boolean
Default	true

menu

Description	Optional property that maps to a Menu's menuId prop. Can also be start or end for the menu side. This is used to find the correct menu to toggle. If this property is not used, ion-menu-toggle will toggle the first menu that is active.
Attribute	menu
Type	string ｜ undefined
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

Name	Description
``	Content is placed inside the toggle to act as the click target.