Ionic - JavaScript Side Menu

Side menu is one in all the foremost used Ionic parts. The facet menu will be opened by swiping to the left or right or by triggering the button created for that purpose.

Using Side Menu

The 1st part that we'd like is ion-side-menus. This part is employed for connecting the facet menu with all the screens that may use it. The ion-side-menu-content part is wherever the content are going to be placed and also the ion-side-menu part is that the place wherever we are able to place a side directive. we are going to add the facet menu to the index.html and place the ion-nav-view within the facet menu content. this fashion the facet menu are often 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 could be a service used for dominant all the aspect menus within the app. we are going to show you ways to use it, then we are going to bear all the choices out there. Like all the Ionic services, we'd like to feature it as a dependency to our controller then use it within the controller’s scope. Now, after we click the button, all of the aspect menus can 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>