How to make a Subnavigation with Tabs


Ionic’s Tabs already have their own navigation stack. So I thought that maybe I could continue the navigation with this. As I kept at this, I thought of making a subnavigation as work around. However, I think I’ve exhausted all my research at google and other forums. So I’d like some help from the Ionic Community. Below is the component structure that I’m trying to achieve.


Template: Blank Ionic 3 template

To navigate from home.html to page1.html, I use this.navCtrl.push(Page1); From Page1 to the tabs, this.navCtrl.push(Tabspage) and each tab has its own navigation stack.

The problem here is when going back from Tabs to Page1 seems like a bad UX. If I put a “back” or “close” button on the TabsPage, it closes the entire Tabs stack (which means the stack for the current tab too). There’s no “back” button from details.html to tab1.html.

I hope this makes sense.

Any help, hints, suggestions are welcome!

Thank you in advance.