Ionic Navigation with Nested Tabs


#1

Could someone give me a hint to using Ionic navigation with nested tabs? Let’s say I have a tab layout as below…

Tab A
Tab A.1
Tab A.2
Tab B
Tab B.1
Tab B.2

If I navigate from Tab A.1/A.2/B.1/B.2 to another page, the back button does not show up. Do I just have something configured wrong? Or is this not a possible setup?


#2

ion-tab doc says: Each ionTab has its own view history.
The behavior you see seems normal to me.


#3

Hi gmarziou,

Thank you for replying! I’m not saying it’s necessarily not the right behavior, I just wanted to check.

Basically, I have two sets of tabs, one up top and one on bottom, and navigation history isn’t working the way I’d expect – navigating from the tabbed page to some other page does not result in a back button showing on the new page. Navigating with just one set of tabs works fine and as expected.


#4

To demonstrate what I mean, look at the following codepen (adapted from another post on this forum):

Go to the About tab, then the page 3 tab, then click on the link.


#5

The link opens the test page which is not nested in tabs abstract state so to me it seems normal that tab history is not managed for the test page.

Personally, I don’t like nesting states using dot notation (tabs.*) as Ionic team chose for their starter app, it’s just feels too magical and creating long state names, I prefer setting parent explicity in state definition.