Ionic nested tabs navigation issue

ionic-v1
1

Hi all,

I am having an issue with navigation when using nested tabs.

In particular I would like to create a tab that contains:

  1. nested tabs corresponding to an index page
  2. the ability to navigate from the index page to specific content (e.g. when clicking inside a nested tab)
  3. The ability to back-navigate to the index page

I suspect that the tab stack implemented by ‘ion-tabs’ doesn’t allow for this type of navigation (since each tab requires it’s own nav-view and hence locks the navigation history to that tab?).

I have created a codepen at http://codepen.io/anon/pen/PPdrMP to illustrate this better.

Notice that in TabA you can navigate to view content and then navigate back.
In TabB->Subtab1 you can navigate to view content but you cannot navigate backwards. You end up stuck!

I was wondering if anyone else has successfully implemented this style of navigation using ‘ion-tabs’.

I’ve been able to put together a solution of what I’m after http://codepen.io/anon/pen/epPZoJ using the CSS tab classes but it involves a bit more work. Notice here that you can navigate backwards from the sub-tab content to the subtab index (TabB->Subtab1).

1 Like
2

Just to provide an update on this, I’ve used Angular directives to create my own ‘non-navigational’ tabs to solve this (along the lines of the second codepen I published in the question).