How to Combine Ionic 4 Tabs and Side Menu Navigation [v4]

ionic-4-meu-tabs

Creating a tab bar with Ionic 4 is pretty easy, adding a side menu is a bit more tricky in terms of the structure but still quite easy. But when it comes to combining both UI patterns, many people encounter a lot of trouble setting up their routing logic and connecting the pages correctly.

In this Quick Win we will integrate a tab bar into one page of our side menu (which means you could also create multiple tab bars for other side menu pages!) and take a special look at how to setup the routing in the most flexible way. It’s not going to be a regular Quick Win as we got a lot of code involved but it’s still the fastest way to get to the desired outcome!

Therefore, we will assume we need a login before our users get to the actual menu page which is a common scenario these days.

ionic-4-side-menu-tabs

We will build the structure from ground up without using one of the starter templates to learn and understand how everything plays together!

Setting up our App

We start with a blank app and add a bunch of pages. I’ve added some separation between the commands so you can already keep in mind at which point we gonna need them.

In the first part we’ll just implement the login to menu flow, then we will refine a menu page into a page with tabs and finally add some more routing to a non-tabs page by using another details page that we can push.

Now start you app like this:

We don’t need any additional imports but we should fix our current routing as most likely all the pages have been added to your app/app-routing.module.ts which we want to clear so it looks like this:

Now our app will start with the login and once we navigate to the menu, another module will take care of the further routing. By splitting things up like this we could now easily secure the whole menu route and all child routes using an auth guard!

Creating the Side Menu

We’ve actually done something similar already where we only created a side menu. Things will be pretty much the same, so let’s start with our login.

Of course this is not a real login, there’s an example of building a basic login flow here so no logic today, simply getting the routing right!

Therefore we can now change our pages/login/login.page.html to:

We rely on the Angular router to make our transition and because we already defined the menu path in our initial routing the router will look up the route once we hit the button.

There’s also first inside the route which indicates we want to open a special path inside our menu. This path will make more sense when you add the routing information for the side menu to the already existing pages/menu/menu.module.ts like this:

This setup defines two child routes for the two pages we have created in the beginning. These will be the pages of our side menu and as we add them as child routes they will have the path:

  • /menu/first: Showing the tabs page later
  • /menu/second: Showing a page without tabs

Now that we got the routing right we should define the actual menu with Ionic components. But before we do that, we make everything a bit more flexible by keeping part of the logic inside the related class so we can later easily add pages in there. Also, we add logic to subscribe to the router events so we can mark the currently active menu item!

So go ahead and change your pages/menu/menu.page.ts to:

As you can see, the array consists of two elements which represent the routes we have defined before. In order to mark the current active item you also need to add some small CSS to your pages/menu/menu.page.scss:

Now we can finally implement the menu markup and it follows the structure for a side menu plus we surround everything with an ion-split-pane.

By doing this, our menu will automatically be expanded and always visible on bigger screens (desktop, ipad) and hide behind an icon on phone sized devices.

Every menu entry holds the link to the page, the page title and also appends conditionally the active-item class when it’s active. We also add one more button manually that goes straight back to the login using the routerDirection root which means the animation looks like we are replacing the whole view (which we actually do in those scenarios).

Also make sure that the contendId of the ion-menu is the same as specified for the ion-router-outlet container.

This outlet is actually the place where all of your pages with content will later be rendered and important to understand when working with a side menu!

Go ahead and add your side menu code to the pages/menu/menu.page.html like this:

Our app is now working already from login to the side menu page so once you are at this point, you can continue to add the tab bar.

Adding a Tab Bar to a Side Menu Page

The tab setup has changed a few times during the beta but has come to a super easy stand right now. We are already loading a module for the first menu page when we navigate to it, so now we can just refine that routing and logic a bit more to hold our tabs as well!

Therefore, we start by adding some tabs path to the pages/first-with-tabs/first-with-tabs.module.ts routing information:

We have already created the tabs1 and tabs2 page in the beginning with the CLI so now we only added their path.

Also, we add some redirect information so we can simply navigate to the tabs and the routing in here will determine which tab will be displayed as the first open tab.

Question: How does the path look like once you navigate inside your app to the first tab?

The Answer: /menu/first/tabs/tab1!

We don’t have any named outlet inside the path anymore and the URL is super easy to follow and understand. And just like setting up the routing for tabs is easy, the markup has been simplified a lot as well. We just need to define the general structure and use the path name for a tab as the information for a tab and everything just works.

In detail this means our tabs information inside the pages/first-with-tabs/first-with-tabs.page.html look like the following:

Super easy, right?

Now the tabs would already work but in order to open the menu from a tab on a small device we would have to add the menu button to the page.

Here’s the code for one tab, you can of course add the same structure to the other tab as well. Go ahead with the pages/tab1/tab1.page.html like this:

Now we’ve already pretty much achieved the goals of this article as we got a side menu, a tab bar and all the routing easy peasy. But let’s add one more thing in case you ask..

Going Deeper Into Detail Pages

Almost always you need to go to another page inside your app that you previously simply pushed to the stack. In our case, we can easily add some routing information and therefore make the details page available within our second page.

To do so, we can simply add the path that we want to give to that page to our pages/menu/menu.module.ts like this:

Now if you want to access that path, we can again use the routerLink like we did on our initial login page and manage the navigation to the details page like this inside the pages/second/second.page.html:

We are using the absolute path here because of this open issue. Normally you could also use the relative path as we are already on the /menu/second page but the navigation will only work once then. So right now, use an absolute path while the issue remains open.

To wrap things up we also need a button to go back on the details page, so open your pages/details/details.page.html and change it to:

Just as a quick note before the question comes up:

You can of course also navigate within your tabs pages to a deeper page. To do so, simply add the routing information to your pages/first-with-tabs/first-with-tabs.module.ts like this:

Then you can call the route from your pages/tab1.page.html like this:

And that’s all for the combined side menu with tabs and regular pages!

Conclusion

The Angular router is pretty powerful and the Ionic team has worked hard on getting to the most easy setup for us. Combining the side menu and tabs is no longer a problem as every page will have an easy accessible path and we don’t need to rely on named router outlets or other hacks to build our UI!

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

Tweet
Reddit
+1
Share
Email