Available in:

Ionic-Angular 0.9.x

Side Menu Controller

The Side Menu Controller enables a left and/or right side menu that can be toggled or exposed by dragging the center content area side to side. One or both of the menus can be enabled:

<ion-side-menus>

No options.

<div ion-side-menu-content>

Attribute Type Default Description
drag-content expression true Use to dynamically disable dragging of this side-menu. For example, 'drag-content="canDrag()"'.

<ion-side-menu>

Attribute Type Default Description
side string left Available: 'left' or 'right'.
width number 275 Width of the side menu, in pixels.
is-enabled expression true Use to dynamically disable this side-menu. For example, 'is-enabled="myMenuIsEnabled()"'

Usage

To use the Side Menu Controller with Ionic-Angular, use the <ion-side-menus> top level directive, adding a <pane ion-side-menu-content> for the center content, and one or more <ion-side-menu> directives:

<ion-side-menus>
  <!-- Center content -->
  <ion-pane ion-side-menu-content>
  </ion-pane>

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>

The center content tag can be any element, but it must have the ion-side-menu-content attribute or class directive.

Like all Ionic controllers, the Side Menu exposes one object for all child scopes that use prototypal inheritance (i.e. all besides isolated scopes).

To access the parent Side Menu Controller on a child scope, access the $scope.sideMenuController object. For example, the following code enables toggling the left side menu from a button in the header bar:

<header>
  <button class="button" ng-click="toggleMenu()">Toggle</button>
</header>
$scope.toggleMenu = function() {
  $scope.sideMenuController.toggleLeft();
};

Low-level API

To use the Side Menu Controller low-level API, follow the markup and Javascript below:

<!-- Center content -->
<div id="content" class="pane">
  <header class="bar bar-header bar-dark">
    <h1 class="title">Center</h1>
  </header>
</div>

<!-- Left menu -->
<div id="menu-left" class="menu menu-left">
  <header class="bar bar-header bar-dark">
    <h1 class="title">Left</h1>
  </header>
</div>

<!-- Right menu -->
<div id="menu-right" class="menu menu-right">
  <header class="bar bar-header bar-dark">
    <h1 class="title">Right</h1>
  </header>
</div>
var contentEl = document.getElementById('content');
var content = new ionic.views.SideMenuContent({
  el: contentEl
});

var leftMenuEl = document.getElementById('menu-left');
var leftMenu = new ionic.views.SideMenu({
  el: leftMenuEl,
  width: 270
});

var rightMenuEl = document.getElementById('menu-right');
var rightMenu = new ionic.views.SideMenu({
  el: rightMenuEl,
  width: 270
});

var sm = new ionic.controllers.SideMenuController({
  content: content,
  left: leftMenu,
  right: rightMenu
});