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

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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.

Note:

Ionic 2 is still a work in progress and things can change. If you find that the contents of this post does not work or has any errors, leave me a comment and I will do my best to update it.

 

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 @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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. :-)