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


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!

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN