How to remove the hamburger menu on some pages?


How to remove the hamburger menu on some pages by using a property on the ion-view tag or controller?

I’m using the sidemenu sample app.


It depends on your use case. You can use a $rootScope variable in the controller like this:


<button class="button button-clear button-icon ion-navicon" menu-toggle="left" ng-show="$root.showMenu"></button>


$scope.$on('$ionicView.beforeEnter', function (e, data) {        
  $rootScope.showMenu = true;

$scope.$on('$ionicView.beforeLeave', function (e, data) {        
  $rootScope.showMenu = false;

Or you could put it in the run function and assign a property to the state if you’re not set on determining it in the controller:

.run(function($rootScope, $state) {
  $rootScope.$on('$ionicView.beforeEnter', function (e, data) { 
    $rootScope.showMenu = false;
    if ($state.$current.showMenu == true) {
      $rootScope.showMenu = true;

State definition:

.state('page2', {
  url: "/page2",
  templateUrl: "templates/page2.html",
  controller: "Page2Ctrl",
  showMenu: true

Keep in mind the user will still be able to swipe to open the menu, if you want to remove this ability you will need to add $ionicSideMenuDelegate.canDragContent(false);

Here is a codepen with examples of the above, where the menu is only accessible on page 2:

Please let me know if this is what you meant. :smile:


yes. that works great.

thank you


The codepen uses both the module and the controller - are both required, or just one of them?
Also, would the markup look any different if one uses template files with ion-view (rather than a single html)?