Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

MenuToggle

[menuToggle]

Improve this doc

The menuToggle directive can be placed on any button to toggle a menu open or closed. If it is added to the NavBar of a page, the button will only appear when the page it's in is currently a root page. See the Menu Navigation Bar Behavior docs for more information.

Usage

A simple menuToggle button can be added using the following markup:

<button ion-button menuToggle>Toggle Menu</button>

To toggle a specific menu by its id or side, give the menuToggle directive a value.

<button ion-button menuToggle="right">Toggle Right Menu</button>

If placing the menuToggle in a navbar or toolbar, it should be placed as a child of the <ion-navbar> or <ion-toolbar>, and not in the <ion-buttons> element:

<ion-header>

  <ion-navbar>
    <ion-buttons start>
      <button ion-button>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Title
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="doClick()">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Similar to <ion-buttons>, the menuToggle can be positioned using start, end, left, or right:

<ion-toolbar>
  <button ion-button menuToggle right>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
    Title
  </ion-title>
  <ion-buttons end>
    <button ion-button (click)="doClick()">
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>

See the Toolbar API docs for more information on the different positions.

Instance Members

ngAfterContentInit()

Sass Variables

Property Default Description
$menu-width 304px

Width of the menu

$menu-small-width $menu-width - 40px

Width of the menu on small devices (under 340px)

Property Default Description
$menu-ios-background $background-ios-color

Background of the menu

$menu-ios-box-shadow-color rgba(0, 0, 0, .25)

Box shadow color of the menu

$menu-ios-box-shadow 0 0 10px $menu-ios-box-shadow-color

Box shadow of the menu

Property Default Description
$menu-md-background $background-md-color

Background of the menu

$menu-md-box-shadow-color rgba(0, 0, 0, .25)

Box shadow color of the menu

$menu-md-box-shadow 0 0 10px $menu-md-box-shadow-color

Box shadow of the menu

Property Default Description
$menu-wp-background #f2f2f2

Background of the menu

Related

Menu Component Docs, Menu API Docs

API

Native

General