Skip to main content

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

In this post i will show you how you can place Ionic tabs navigation at the bottom or at the top for your ionic framework apps with version 1.x . If you are looking for information on How to Place Ionic 2 tabs at the bottom or top check out my other post as things work differently in Ionic 2.

The default layout for Ionic tabs navigation is as following:

For IOS – Bottom

For Android – Top

So there are may reasons that you want to move the tabs navigation form the top to bottom or vice versa one of them is that you want your apps to look consistent on both IOS and android.

Tabs Layout

Here is how you can achieve this

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)

In side the app.js file we will need to inject the  $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘top’); to it like so

 

 

It’s kind of obvious form the code  $ionicConfigProvider.tabs.position(‘top’); sets the tabs at the top and  $ionicConfigProvider.tabs.position(‘bottom’); will set them at the bottom for both the plataforms

 

tabs layout final

 

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