Ionic Side Menu With Multiple Tab Bars [v3]

The questions about the navigation patterns side menu and tab bar never end, especially how they can both work together (friendly). Therefore today we will explore different options for using a combination of side menu and tab bar!

We will build a simple app that can open different tab bar interfaces from a side menu or a standard page. Also, we’ll add a feature to automatically open a specific tab of the selected tab bar so our final result will look like this:

Let’s get started!

Are you ready to start learning?

Join the Ionic Academy

Creating the Pages

For our example we need quite a few pages, but 4 of them are more or less dummy pages. Also, we could start this with the side menu but just like in the previous Quick Win about showing different menus to different user roles we start without any previous code to truly understand all steps needed.

For now go ahead and create the project plus the pages:

Just like in the GIF at the top we have two pages that will host a tab bar interface, one page that has no tab bar and one that directly jumps into a selected tab.

The Side Menu

Our Menu consists only of 4 buttons, but to make this more flexible we use an array with all the information about the different entries/components. Anyway. the template for a menu is pretty much the Ionic standard and goes into our pages/home/home.html as this page is currently set as the initial page of our app:

The logic for the menu is now already more interesting. Normally when we open a page, we simply set the new page as the root of our navigation and in this case we use the ViewChild annotation to grab a reference to the parent navigation controller.

Note that we simply use the appropriate Tab bar template/component for the entries – that’s enough to show their specific tabs or no tab bar at all! We replace the whole container when we set a new page, so whatever is in that page will be displayed.

To directly jump into a tab we also pass in a tab index that will be handled by the page itself at a later step. For now though open your pages/home/home.ts and change it to:

Now we got the menu logic in place and just need to finish our 2 tab bar navigations!

The Standard Tab Bar

This case is the easiest and contains pretty much only what’s truly needed for a tab bar with Ionic. Go ahead and change your pages/lists-tabs/lists-tabs.html to:

Note: By adding the ion-header area inside the template for the tab bar we are defining this to be the same header across all the tabs of this tab bar. If you want different titles you could also leave this out and add it to the single tabs, but then also make sure to copy the menuToggle so you can still access the menu!

The logic for this page is also not really a logic, we just need to set our 2 root pages for the two tabs like this inside pages/lists-tabs/lists-tabs.ts:

Now we can navigate to this page and the 2 tabs from our side menu, so let’s finish by adding the second tab bar as well!

The Advanced Tab Bar

The code for this is pretty much the same, but simply on a different page so we can have different tab bars on different pages!

Also, in this scenario we add an ID to the ion-tabs in order to access them later from our code. Go ahead and change the pages/dashboard-tabs/dashboard-tabs.html to:

As I said, pretty much the same. Now we can access the tab bar instance as a ViewChild and automatically switch or select the correct tab which index was passed to this page (remember the menu and openTab)!

To do so, change your pages/dashboard-tabs/dashboard-tabs.ts to this:

No Tabs At All

The last option was to simply have one page without a tab bar, and for this we don’t actually need any changes but if you want to navigate to such a page always make sure to add the button with menuToggle so users can actually leave the page again!

In this case we could simply add it to the pages/no-tabs/no-tabs.html like this:

It’s actually quite easy to combine the different patterns if the outside template is the menu. Each component/page that you set as a new root to the content of the menu can have it’s on navigation stack, navigation bar, tab bar, footer.. Whatever you can think off!

And with this knowledge you are prepared to build some sharp looking interfaces for your users.

You can also find a video version of this Quick Win below.