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

Related

Menu Component Docs, Menu API Docs