How to load sub views when using tabs


I am building a app that uses tabs and menu. All the items in the menu are separate pages that are not a part of the tab bar. I would like the menu pages to display the tab bar when viewed. I have been unable to successfully get the menu pages to show as subviews on the tabs abstract view.

Whenever I navigate to a menu item it is treated as a part of the tabs nav history. (back button shows up, page slides into view) How can I structure things so that the menu items are treated as top level pages? Here’s a codepen that shows the challenge I am facing:

*I am using a Ionic Modal because I wanted the menu to slide in from the bottom/top not the sides.


Not sure if it the best solution but you can add this to the goToPage() function:
disableBack: true

and that it :smile:


This sorta works but breaks the routing. If you are on say the ‘About tab’ or ‘Contact tab’ then opne the menu and navigate to the Schedule page, 2) then go back to wither the about or contact tab, finally click on the home tab and you will find that the state of the home tab is the schedule page. If the then click the home tab button a second time it will navigate to the home state.

I have been beating my head in trying to figure out a way to solve this. @haytam , your solution has us one step closer. Thank for taking a stab at this challenge. Any thoughts about how to solve the routing issue?


Something is telling me that there is a way better solution.
But this is the trickiest that I can get.
The idea is to make an <ion-tab> for the schedule view for example, and then hide it with css.
Take a look :