How to Add A Tab Bar to Your Ionic App [v4/v5/v6]

In this Quick Win we will add a tab bar to our Ionic app starting from a blank template using the CLI to generate our pages and new Angular Router.

05/01/2020: Updated for Ionic 5!

The new Angular routing in the background makes this task a bit more tricky and especially going from tabs to other pages can lead to confusion in terms of the routing. We will create our routing for different cases including passing data to a details page and showing or hiding the tab bar on specific pages.

ionic-4-tabs

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 Add A Tab Bar to Your Ionic App [v4/v5/v6]

  1. Jens Lück says:

    Hallo Simon,
    very nice tutorial. Helped me a lot to dig deeper into the routing matter… But I found three little errors.
    1. /tab: Starting path, resolves to …. -> . /tabs: Starting path, resolves to ….
    2. If you take a look at the app/app.component.ts … -> If you take a look at the app/app.component.html
    3. ->

    Also the ion-back-button remains invisible (probably an issue with ionic beta 16), but adding defaultHref=”” helped to make it visible ->

    Would be great if you could fix it. Thanks in advance!

    1. Simon Grimm says:

      Hey Jens, thanks a lot for all of this! The world needs more people like you that don’t just complain but also help to make things better.

      I’ve fixed all of the issues and yes, some of them just happened lately..I’m sure there will be again minor changes before the final version is out 😀

      1. Jens Lück says:

        Wow, that was a quick response. You are doing a great job with your tutorials. Thanks a lot!

  2. Fernando Herrera says:

    I’m facing some strange behaviour, everything works (with a little help of the ionic/docs), but this is a good tutorial, but my issue is simple, I don’t have the animation when I move to the detail page, within and without the tabs… the back button have animation… pretty strange

  3. hisham2015 says:

    Hi there,

    I’m facing a strange problem I got an error say that ion-tab is not an angular element or to be more specific I got this error ( ion-tab is not a known element )

    I searched a lot but I didn’t find solution for this!

    1. Simon Grimm says:

      That happens most of the time when your page module doesn’t import the Ionic module!

Leave a Reply

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