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.



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


we will create button with menu-toggle = "left" directive.

HTML Template

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>
enable-menu-with-back-views can be set to false to disable side. hide the menu-toggle button from the header. The other attribute is delegate-handle, which will be used for the connection with $ionicSideMenuDelegate.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. 

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(); }; })


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