How To Place Ionic 2 Tabs At The Bottom Or Top Of The Screen?

In this tutorial we will see how to place Ionic 2 Tabs either at the Top or at the Bottom of you app. By default the Ionic 2 tabs will take the device specified default position for Tabs i.e, for Android the default position is Top and for iOS the default position is Bottom.I wrote a post  how you can achieve this for Ionic 1.x apps in one of my previous post. But as Ionic 2 has evolved to a new version we no longer do things the old way.

There may be many reasons why you would want to do such a thing, maybe you are displaying banner ads at the bottom and you don’t want users to accidentally tap on the ads so you want the tabs to be shifted at the top or maybe you just want a consistent look and feel to you app across iOS and Android

Ionic 2 tabs default


So let’s get started

Step 1)

We will need to create a new project you can do this in your existing project. We will need to use the tabs template for obvious reasons.


Step 2)

Inside our src\app\app.module.ts file we will pass tabsPlacement:'bottom' as an object value to the IonicModule.forRoot() function. Notice that we are passing our object as the second argument. You can use 'top' in place of bottom if you want tabs to appear at the top. Now our src\app\app.module.ts file looks like the following


And that’s it we are done.

Step 3)

Now it’s time to run our app and see the result. We can see a side by side preview of iOS and Android by running the following command from the command prompt


Ionic 2 tabs at bottom


Platform Specific Placement

With Ionic often you are building for multiple platforms at once. So what if you want to place tabs on top for one platform and at the bottom for another? The answer is simple we pass the following in the IonicModule.forRoot() function


Here, we are adding the tabsPlacement: 'bottom' to all the platforms but immediately after that, we are overriding it by providing platform specific placement settings for each platform.


You can read more about the Ionic 2 Tabs component in the documentation for tabs here and read more about config here.


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)