How to place ionic tabs at the bottom of the screen?

Question

I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>

score 175 · Answer 1 · edited Feb 21 '17 at 08:36

175

Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on. In the case of tabs, for iOS the default is to display on bottom, and Android on top.

You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

You can check documentation here

edited Feb 21 '17 at 08:36

Nikolay Fominyh

8,946
8
66
102

answered Jan 13 '15 at 05:24

jrl53

1,861
1
11
6

1

no it doesn't work. On the browser tabs are at the bottom, on Android - on top – Toolkit May 12 '15 at 03:59
3

@Toolkit Android tabs are supposed to be rendered on top by default according to Ionic docs. Android guidelines are to avoid using bottom bars because of the OS default actions located at the bottom: http://developer.android.com/design/patterns/pure-android.html – Daniel Rochetti May 19 '15 at 02:57
@Toolkit I've already edited the answer to fix the platform defaults information. If you want to customise it, the code above is the right way to it. However I would suggest you to avoid changing platform defaults, they tend to follow the platform guidelines. =) – Daniel Rochetti May 19 '15 at 03:07
Is there a way, using this method or another, to have bottom and top tabs? I tried creating another state for my footer but, for some reason, it's not rendering to the screen even though i see it in the network tab in my browser. Any thoughts on this? Thanks – Bill Pope Jul 29 '15 at 12:46

score 65 · Answer 2 · edited Aug 05 '15 at 10:56

65

To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Hope this will help.

edited Aug 05 '15 at 10:56

e382df99a7950919789725ceeec126

5,751
4
31
56

answered Jun 05 '15 at 19:29

AhmedBinNasser

2,735
1
24
24

How to achieve tabs on both top and bottom of the screen? – Syed Danish Ali Mar 21 '16 at 12:34
I think you could create separate template for tabs on bottom and top – AhmedBinNasser Mar 21 '16 at 17:38
Oh yes. I get it. I'm a newbie in this ionic's world. – Syed Danish Ali Mar 21 '16 at 17:39
This should be marked as answer. It's simple and straight to the point, you got my up-vote... – Mbithy Mbithy Mar 30 '17 at 08:09
While set android tab to bottom it's working well as per your code, But while pressing keyboard the tab as well showing up with the tab. Is there any option to set it stable in the bottom while pressing keyboard. – Suthan M Jul 26 '17 at 11:03

score 9 · Answer 3 · edited Feb 21 '17 at 10:41

9

Update for Ionic 2 (cleaner/improved syntax):

In app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

See Configs

edited Feb 21 '17 at 10:41

Blu

4,036
6
38
65

answered Apr 01 '16 at 18:23

Greg Blass

3,523
29
42

score 7 · Answer 4 · answered Nov 18 '16 at 10:00

Placing it in your app.js does the work.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.

For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.

Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS

Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs

score 5 · Answer 5 · answered Feb 05 '18 at 04:12

In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); //top

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

score 3 · Answer 6 · edited Feb 21 '17 at 09:49

3

How to place ionic tabs at the bottom of the screen in Ionic 2

For the current version ionic 2.0.0-beta.10.

In app.ts:

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

See Config

For the soon to be released ionic 2.0.0-beta.11

In app.ts:

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

Config

edited Feb 21 '17 at 09:49

Blu

4,036
6
38
65

answered Jul 19 '16 at 20:54

MasterProgrammer200

1,021
2
17
29

score 2 · Answer 7 · answered Dec 14 '16 at 09:17

2

myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);

answered Dec 14 '16 at 09:17

Nasouh Almrstani

73
1
8

Please, avoid code only answers and explain your solution. – Micho Dec 14 '16 at 09:45

score 2 · Answer 8 · answered Sep 22 '17 at 04:03

2

Update for Ionic 2, and Ionic 3+:

You have 2 methods to change tab bar position:

Method 1: Use tabsPlacement propertive of <ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

Method 2: Change config in app.module.ts

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

See the docs

answered Sep 22 '17 at 04:03

Duannx

7,501
1
26
59

Is there anything remotely similar for the Segment component? I can put it at the bottom with CSS no worries, but putting the border on the buttons on top then sort of has so many loops to jump through and feels rather hacky, so I wonder if there was an easier solution, but came across none in the docs. Actually, the Segment doc is rather short....https://ionicframework.com/docs/api/components/segment/Segment/ – yogibimbi Feb 28 '18 at 10:53
Answer to self: `ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }` does the trick, however, for the border-top-width I didn't find any other recourse than to set it explicitly in the style-attribute on the element to 2px. Something else always overwrites it with 3px, even setting it in Chrome on the element and with !important in the style sheet does not seem to top that. – yogibimbi Feb 28 '18 at 14:07

score 0 · Answer 9 · answered Jan 14 '22 at 06:53

0

Try This

<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>

answered Jan 14 '22 at 06:53

Mohamed Imran

149
1
5

How to place ionic tabs at the bottom of the screen?

9 Answers9

How to place ionic tabs at the bottom of the screen in Ionic 2

Update for Ionic 2, and Ionic 3+:

Linked