ion-side-menus
Delegate: $ionicSideMenuDelegate

A container element for side menu(s) and the main content. Allows the left and/or right side menu to be toggled by dragging the main content area side to side.

To automatically close an opened menu, you can add the menuClose attribute directive. The menu-close attribute is usually added to links and buttons within ion-side-menu-content, so that when the element is clicked, the opened side menu will automatically close.

“Burger Icon” toggles can be added to the header with the menuToggle attribute directive. Clicking the toggle will open and close the side menu like the menu-close directive. The side menu will automatically hide on child pages, but can be overridden with the enable-menu-with-back-views attribute mentioned below.

By default, side menus are hidden underneath their side menu content and can be opened by swiping the content left or right or by toggling a button to show the side menu. Additionally, by adding the exposeAsideWhen attribute directive to an ionSideMenu element directive, a side menu can be given instructions about “when” the menu should be exposed (always viewable).

Side Menu

For more information on side menus, check out:

Usage

To use side menus, add an <ion-side-menus> parent element. This will encompass all pages that have a side menu, and have at least 2 child elements: 1 <ion-side-menu-content> for the center content, and one or more <ion-side-menu> directives for each side menu(left/right) that you wish to place.

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

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

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

</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

Attr Type Details
enable-menu-with-back-views
(optional)
bool

Determines whether the side menu is enabled when the back button is showing. When set to false, any menuToggle will be hidden, and the user cannot swipe to open the menu. When going back to the root page of the side menu (the page without a back button visible), then any menuToggle buttons will show again, and menus will be enabled again.

delegate-handle
(optional)
string

The handle used to identify this side menu with $ionicSideMenuDelegate.