Ionic 4 | How to Add Tabs Bar and Create Tab Navigation in Ionic 4 Application

Tab navigation proves very useful where we need to show a clean UI with some basic layout with eazy accessibility and navigation system remains always visible to the user giving an idea where the current location is.

In this article, we will add tabbing navigation in the Ionic 4 application using the ion-tab component. We will discuss a very easy and latest method to impliment tabs bar on the bottom of application layout.

We will first create a new Ionic 4 basic application with the blank template then add three new pages tabs, tab1 and tab2. Then we will remove the default home page completely and work only on tabs pages created.

Let’s get started!

First, make sure you have installed the latest version on Ionic CLI version using the following command.

 

Now create new Ionic 4 Application or continue with the already existing app

 

After creating a blank Ionic 4 Application our app file structure will look like this

 

Next, we will create new pages tabs, tab1 and tab2 using below commands in Ionic CLI

 

Then simply remove the home folder from the application structure.

 

In the file, app-routing.module.ts remove all paths defined in the router and leave only TabsPageModule with the path set to empty.

Here we are loading tabs components by default in which we will add tab bar HTML structure components in further steps

 

In file tabs.module.ts file make following changes to define children paths as follows:

In the above code, we have defined children array with tab1 and tab2 router paths.

Also defined an empty path with redirectTo set to ‘/tabs/tab1’ so that tab1 component will be loaded by default when the app is started.

 

In the file, tabs.page.html replace the following code

Here we have added new ion-tabs with ion-tab-bar with two ion-tab-button having tab attribute set to ‘tab1′ which is tab component path actually.

Now run the application  $ ionic serve --o and you will see the application as shown in the image below.

In this way, you can add tabs navigation very easily in existing or new application without making any major changes.

 

Leave a Reply

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