Subscribe

Ionic tab bar circle middle button

✍️

Making the center tab button stand out in Ionic

19 May, 2021 · 2 min read

Today I'll be showing you how to make a circle middle button inside a tab bar.

It's a way to make a button stand out more from the tab bar, and it can be your center of attention inside your app.

Ionic tab bar circle middle button

Circle middle tab bar button

We won't be making everything from scratch, so if you plan to work with me on this article, download the Ionic tab bar starter from GitHub.

From there, open up the project in your editor of choice. If we then run the application, we will get a basic tab bar, and we will focus on changing this tab bar.

Ionic basic tabbar

Open up the tabs/tabs.page.html file.

For our example, we will make five buttons in our tab bar. The middle one will be outstanding.

Let's start by adding the five buttons and make the middle one an empty one.

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button></ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="egg"></ion-icon>
      <ion-label>Tab 5</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

This will result in the following:

Ionic 5 tabs

You might think, cool, but we are missing that bottom one! And you're right, so what we'll do is add a FAB button for that.

It will take place outside of our tabs and look like this.

<ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
    <ion-icon name="leaf"></ion-icon>
  </ion-fab-button>
</ion-fab>

And this will give us the following:

Middle fab button tab bar Ionic

Cool and simple right? You can find today's code on GitHub as well!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

How to solve App Tracking Transparency app store rejection in Ionic

4 Aug, 2021 · 4 min read

How to solve App Tracking Transparency app store rejection in Ionic

Ionic skeleton loader

17 Mar, 2021 · 3 min read

Ionic skeleton loader

Join 1509 devs and subscribe to my newsletter