Ionic-framework: hideBackButton attribute hides the menuToggle button too

[HamzaLJ]

The Problem
I push the Root Page to Page2 that supports a side menu, the issue is that when it opens Page2 it shows the back button and hides the menu button for that I've tried to add hideBackButton to Page2 in order to see the menu button but I both the back button and menu button disappeared!

Here is my current code:

  <ion-navbar hideBackButton>
       <button menuToggle start>
       <ion-icon name="menu"></ion-icon>
       </button>
 </ion-navbar>

What behavior are you expecting?

Should hide the back button, and show the menu button.

Which Ionic Version?
Ionic2

Cordova CLI: Not installed
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v4.4.7
Xcode version: Xcode 7.3.1 Build version 7D1014

[esqew]

Having this issue as well, my code is similar to the OP.

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.3.0

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[esqew]

I know you asked for a plnkr; I hope a CodePen will suffice. https://codepen.io/esqew/pen/QExGrE

The toggleMenu button is displayed on the first page - after clicking through to a list item, the left side navigation button is blank. The HTML should provide a toggleMenu button (as with the root page).

This issue is only when using the hideBackButton directive.

[jgw96]

Hello @esqew unfortunately that codepen is using a very outdated version of ionic 2. Would you be able to use this plunker to make an example? Thanks for using Ionic!

[esqew]

Hi again, I've reproduced the issue in this plunker. When you use this.nav.push(Page1) the page is pushed to the navigation stack, but the hideBackButton directive hides the menu item that's supposed to be displayed (and is in fact displayed on the rootPage).

[neslinesli93]

Did you guys manage to solve this?
I mean, this is a really basic use case, I am surprised this issue hasn't been fixed.

When using a side menu, I want to be able to cache the views as I transition between the menu entries.
This isn't possible using nav.setRoot() as it wipes the navigation stack. That's where nav.push() comes into place, pushing the sidemenu entries into the navigation stack, thus caching the views.
However, it shows the back button along with the menu toggle. The ion-navbar property hideBackButton seems perfect for this, but it hides both the back button AND the menu toggle.

How are we supposed to implement views caching when using sidemenu design? Is this a bug?
Thanks, and keep up with the good work!

[esqew]

Still not working even after updating to 2.1.2.

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.2
ios-sim version: 5.0.3
OS: Mac OS X Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.0 Build version 8A218a

[Abhishek134]

Did anyone able to solve it?
I'm also troubling with the same.
I'm using ionic cli V3.6.0.
ionic (Ionic CLI) : 3.6.0
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.6.0
System:
Node : v8.1.4
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 6.0.0
npm : 5.0.3

[vvrahul]

Hi Here is the solution ,

if you are using this.navCtrl.push(page2) it just push the component to the main root .. instead of this we can use

this.navCtrl.setRoot(Page2);

hope this will hep you people

[pertsenga]

This is ugly but what I did was call this.navCtrl.setRoot(page) twice and the menu button shows. idk why but it worked

[karmastudy]

Hi,
Using this.navCtrl.push(page); or this.navCtrl.setRoot(page); I can see the menuToogle button, but it doesn't work. By clicking the button nothing happens.

Thanks for help

[devpato]

@karmastudy

put a clicker on the button of the menu

onOpenMenu(){
    this.menuCtrl.open();    
  }

don't forget to import MenuController from ionic-angular and declare it in the contructor

[giovannipds]

It's also possible to avoid that with:

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}

[pratik8490]

how to display menu i can't show menu after login screen to go home screen

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/121