Creating a tab bar with Ionic 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.

05/01/2020: Updated for Ionic 5!

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.

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