Example of nested tab bar navigation?


#1

Hi,

I’m struggling with Ionic since yesterday trying to create this kind of navigation inside my app:

I didn’t find any example of a nested navigation using a second tab bar…

Is there someone who knows the way to properly achieve this?

Here’s a link to my current buggy implementation:
Ionic Nested tab bar problems

Thanks in advance


#2

I have this need in my app as well. I have implemented it actually but the problem I have encountered is that the first inner tab content doesn’t load when you come to it. Unless you navigate to another tab and come back to it, nothing shows. I guess it’s still a bug because the tab title of the inner tab is shown correctly. I’m still waiting for a fix.

As to your question on how to implement: Just make the inner landing page to still be an abstract state that will house the tab contents; but this time -the inner one.

In your example, I figured out that if you change the “About” ref to tabs.about.page2, it loads the tabs.about.page1 correctly. What a hack!


#3

Hi. Thank you for your reply.
I made a new Codepen with a working solution.
The point is not to use the directive for the second tab bar but plain html.
The only problem is that the tab bar will not reflect the active state unless you set it in js or copy the tab bar in all your sub views with the active state specified.

Nested tab bar second try


#4

Could anyone to resolve my problem if we have six nested tabs?