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

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.


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