How to add multiple buttons to footer / toolbar



i need to add a toolbar to the footer of a page with 5 buttons. These buttons should be placed fine like in this example:

The example was made with xcode and works fine. I want to have it with ionic too.

    <button ion-button>
      <ion-icon name="person-add"></ion-icon>
    <button ion-button>
      <ion-icon name="alert"></ion-icon>
    <button ion-button>
      <ion-icon name="undo"></ion-icon>
    <button ion-button>
      <ion-icon name="create"></ion-icon>
    <button ion-button>
      <ion-icon name="checkmark-circle"></ion-icon>



you can do this in two way as per my knowledge

  1. i suggest to use ion-tab templet to add 5 buttons in footer.
    but ion-tab is typically hard to use custom icon and all thing.

  2. you can make your own component with five button and use into page footer.

as you can see i have attache screenshot from one of my past app i made component for use button in footer


Could you please share some code of the component?

I use ion-tabs but when opening the page i hide the tabs and want to show some new footer with 5 buttons.



I made a stackblitz example for you :slight_smile:

I used ion-tabs instead of ion-footer and ion-toolbar. I think you should look into this instead of working with the footer to save some time :smiley:
Hope that’s what you are looking for.

All the best!


I think you misunderstood.

I have a tabbed app (4 tabs) and within one tab i open a new blank page from a list. In this new blank page i want to have a footer / or new tabs with 5 buttons.


hello here is sample code for component:


<div class="tab_container">
  <div class="tab_button" (click)="selectTab(0)">
    <img src="assets/icon/search.png" *ngIf="select != 0"/>
    <img src="assets/icon/search_yellow.png" *ngIf="select == 0"/>
    <ion-label [class.selected]="select == 0">Search</ion-label>
  <div class="tab_button" (click)="selectTab(1)"> 
    <img src="assets/icon/bookmark.png" *ngIf="select != 1"/>
    <img src="assets/icon/bookmark_yellow.png" *ngIf="select == 1"/>
    <ion-label [class.selected]="select == 1">Bookmaker</ion-label>
  <div class="tab_button">
      <div class="add_new" (click)="selectTab(2)">
        <img src="assets/icon/add.png" class="center_item" />
  <div class="tab_button" (click)="selectTab(3)">
    <img src="assets/icon/notification.png" *ngIf="select != 3"/>
    <img src="assets/icon/notification_yellow.png" *ngIf="select == 3"/>
    <ion-label [class.selected]="select == 3">Notification</ion-label>
  <div class="tab_button" (click)="selectTab(4)">
    <img src="assets/icon/user.png" *ngIf="select != 4"/>
    <img src="assets/icon/user_yellow.png" *ngIf="select == 4"/>
    <ion-label [class.selected]="select == 4">Profile</ion-label>


custom-tab {
        padding: 10px 0px;
        background-image: url(../assets/icon/footer.png);
        background-size: 100%;
        background-repeat: no-repeat;
            color: #faaf19;
            opacity: 1 !important;
            width: 19%;
            display: inline-block;
            padding-top: 20px;
                height: 20px;
                display: block;
                margin: auto;
                margin: 0px;
                font-size: 11px;
                text-align: center;
                padding: 7px 0px;
                font-family: exo2-medium;
                opacity: 0.6;
                background: #faaf19;
                height: 55px;
                width: 55px;
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 50%;
                    height: 30px;


export class CustomTabComponent {

  select: any = 0;
  constructor(public navCtrl: NavController) {
    console.log('Hello CustomTabComponent Component');
    if(localStorage.getItem('tabIndex') == null){ = 0;
    }else{ = localStorage.getItem('tabIndex');
    if(tabIndex == 0){ = 0;
    }else if(tabIndex == 1){ = 1;
    }else if(tabIndex == 2){ = 2;
    }else if(tabIndex == 3){ = 3;
    }else if(tabIndex == 4){ = 4;

this is complete code for use component with five buttons in footer


@JensOlleOlsson, this is exactly what i have been looking for; but sadly this is for Ionic 3 and won’t work in Ionic 4 (Angular routing)… any chance you know the same for Ionic 4?