Ionic - JavaScript Side Menu

Side menu is one of the most used Ionic components. The Side menu can be opened by swiping to the left or right or by triggering the button created for that purpose.

Using Side Menu

The first element that we need is ion-side-menus. This element is used for connecting the side menu with all the screens that will use it. The ion-side-menu-content element is where the content will be placed and the ion-side-menu element is the place where we can put a side directive. We will add the side menu to the index.html and place the ion-nav-view inside the side menu content. This way the side menu can be used throughout entire app.

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

Now, we will create button with menu-toggle = "left" directive. This button will usually be placed in the apps header bar, but we will add it in our template file for better understanding.

When the button is tapped or when we swipe to the right, the side menu will open. You could also set the menu-close directive, if you would like to have one button only for closing side menu, but we will use the toggle button for this.

HTML Template

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

The above code will produce the following screen −

You can add some additional attributes to the ion-side-menus element. The enable-menu-with-back-views can be set to false to disable side menu, when the back button is showed. This will also hide the menu-toggle button from the header. The other attribute is delegate-handle, which will be used for the connection with $ionicSideMenuDelegate.

The ion-side-menu-content element can use its own attribute. When the drag-content attribute is set to false, it will disable the ability to open the side menu by swiping the content screen. The edge-drag-threshold attribute has a default value of 25. This means that swiping is allowed only 25 pixels from the left and right edge of the screen. We can change this number value or we can set it to false to enable swiping on the entire screen or true to disable it.

The ion-side-menu can use the side attribute that we showed in the example above. It will determine whether the menu should appear from the left or the right side. The ‘is-enabled’ attribute with a false value will disable the side menu, and the width attribute value is a number that represents how wide the side menu should be. The default value is 275.

Side Menu Delegate

The $ionicSideMenuDelegate is a service used for controlling all the side menus in the app. We will show you how to use it, and then we will go through all the options available. Like all the Ionic services, we need to add it as a dependency to our controller and then use it inside the controller’s scope. Now, when we click the button, all of the side menus will open.

Controller Code

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTML Code

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

The following table shows the $ionicScrollDelegate methods.

Delegate Methods