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

ionic-4-meu-tabs

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.

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!

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



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

  1. Abdul Hameed says:

    Great work

  2. Thank you,
    Here I’m better understanding about Routing in ionic4.

  3. Milan Kováčik says:

    Doesn’t work to m, always get:
    tab with id: “undefined” does not exist

  4. Francisco Vieira says:

    Lots of problems here, please show your app.component.html file

  5. Zafer Ka says:

    For example i don’t want login page. Directly go to home page with tab1 and tab2. Have i to redirect to tab1 at home? Can’t i show home content? As i understood, tab container page is useless (no content) like first page in this example.

  6. Francisco Vieira says:

    I probably did something stupid and the tabs clicks don’t work anymore. What could be the problem?

Leave a Reply

Your email address will not be published. Required fields are marked *