Ionic tabs with custom button at center


Hi there,
I would like to customize my ionic tabs menu like the one in the image below. I am using ionic2. Any idea how?



You want to achieve Tab view or the + icon view (as a floating icon) or both ?


I want to achieve a tab view like that, I would prefer not using a floating button on top of a ion-tabs


Refer below link:

You can have
Text Tabs
Icon Tabs
Text and Icon Tabs
Badge Tabs

I hope this will help you.


I have already referred to them, the problem is that I need the icon to be bigger than the Tab View


Hey, I would like to know if you did it? and how?


Did you achieve that? I need acchieve somthing like that too.Plz share if you. Thanks


You can try with something like this

    <ion-tab label="" icon="home" href="/tabs/(home:home)">
        <ion-router-outlet name="home"></ion-router-outlet>
    <ion-tab label="" icon="warning" href="/tabs/(about:about)">
        <ion-router-outlet name="about"></ion-router-outlet>
    <ion-tab label="" icon="pin" href="/tabs/(contact:contact)">
        <ion-router-outlet name="contact"></ion-router-outlet>
    <ion-tab label="" icon="person" href="/tabs/(contact:contact)">
        <ion-router-outlet name="contact"></ion-router-outlet>

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

Keep in mind, this is for Ionic v4



Cool, sorry can i ask something? The plus button in the center work just fine, but the rest of the icon tabs doesn’t show…


I did your method but how to navigate that plus button to the page which is belong to tabs page itself?


Assign a click event to the button to navigate to the page