Help on navigation workflow


Hello ionic fans,
I am brand new to this whole html/javascript world (I am a pure java developer) but I am intending to create a android app using cordova/angularjs/ionic.
I have a simple design that I do not manage to make work.
I would be very happy if someone could help me.

What I try to acheive
The home page should have 2 buttons at the bottom (no home button). The “settings” (gear) should slide to the right to the setting page, which have 2 new buttons at bottom “setup1” and “setup2”.
I have used a <ion-nav-bar/> directive to have a back arrow to the home screen when we are in the settings screens (but I am not sure that is a good choice).
I have created a codepen sample to show my first attempt here :

Here are the problems I am getting :

  1. the setting1 or setting2 pages do not get displayed, or if I manage to display them by using an additional <ion-nav-view></ion-nav-view> the back arrow on my navbar disappear ?
  2. On the home page no button should be selected but the “info” button is, it seems that selection is not related to the state of the ui-router?
  3. the home “info” button should slide to the left and the “right”, how to make this happen ?

Thanks to anyone that have red until here and that ma give me some hints.


Hi Sebastien,

  • short answer :slight_smile: :

  • detailed answer :

  • If your Home view is not the same as your Info view, you should/must(?) put your Home view in a tab like I did. If you show a tabs bar at the bottom, one must be selected (by design).

  • When you go to Setup View, a new “ion-tabs” view is loaded and it has his own history (by design), so no more “back” button like we have when navigating from one “normal” view to another “normal” view.

  • BUT, you can implement your own “back” button like I did (see code).
    nb: I choose to go back to Home, but we should go to the previous state instead (could be “Info” tab or another page). It should be possible to implement it by passing a parameter (i.e. “currentState”) when clicking on the setup tab button to be able to go back there.

  • About sliding animations, AFAIK there is none by default between tabs (again, by design).

Final notes:

  • Don’t forget to use an abstract state (see code).
  • Try to use ui-sref instead href for navigation between states.

Happy coding !


Thanks very much for this thorough answer this will help me a lot.

But my “Info” view will behave exactly like the “settings” view, with a brand new set of tabs at the bottom, this is why the “home” button is unnecessary, because it will never be pressed. This worries me a little when you say I must have a selected button, should I consider it as a bug or suggest this enhancement ?

The user will go back to Home using the top-left back arrow from the “Settings” and the top-right forward arrow from the “Info” page.
This is also why I’d like some sliding effect to the right for “Settings” and to the left for the “info” page.

Again thank you very much to have taken time to answer my request and thanks for the last 2 notes, I’ll definitely use ui-sref although I do not understand why I should use abstract state ?


I mean, there is always a “selected” tab in a screen with tabs.
For example, an equivalent for desktop pc :

Do you believe no tab can be selected here ?

Ok, so your “Info” and “Settings” views should not be tab-views, but “normal” views. The 2 buttons are not tabs but 2 standards buttons.
In each each view, you can have a tab-view with the tabs you want.

see this new link

About animations, it seems not possible yet to change it for different views : see this post


Many many thanks elSolo,
I am sorry to have not answered to you before, I did not get any mail notifications on your post, I just bump into it on the ionic when coming back on the forum.
I will surely use your lasted proposal although I managed to hide the home tab on the first codepen you did and it worked well but I like the slide effect so I’ll use the latest one.

Thanks again you are terrific.