Extra toolbar on top of IonTabBar

I am trying to build an audio player in Ionic.

What I’m having problems with is how to implement a bar on top of the tabs. (Screenshot attached of what I’m hoping to do).

Now I could easily position it absolute on top of everything, but that would create some weird side effects to manage. What I really was hoping for, was for it to be included in the flex layout between the div.tabs-inner element and the ion-tab-bar.

Anyone have any suggestions on how to do that? :slight_smile:


Hi @MartinMouritzen,

best way would be to put the custom bar between <ion-tabs> and <ion-tab-bar slot="bottom">.

Here is an example of my customer audio player bar:


  <div class="box-shadow">
    <app-audio-player-item *ngIf="podcastEpisodeGuid$ | push as guid" size="tiny" lines="none" [guid]="guid">

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="news">
        <ion-icon src="/assets/ui/tab-bar/icon-news.svg"></ion-icon>

      <ion-tab-button tab="kurse">
        <ion-icon src="/assets/ui/tab-bar/icon-kurse.svg"></ion-icon>

      <ion-tab-button tab="magazine">
        <ion-icon src="/assets/ui/tab-bar/icon-magazin.svg"></ion-icon>

      <ion-tab-button tab="podcast">
        <ion-icon src="/assets/ui/tab-bar/icon-podcast.svg"></ion-icon>

      <ion-tab-button tab="video-player">
        <ion-icon src="/assets/ui/tab-bar/icon-video.svg"></ion-icon>
1 Like

Thank you very much for your reply.

I am unsure why, but this does not work for me. I am unsure if it has something to do with me using the React version, or if I am just not using it right :smiley:

I basically have a layout like:

      <IonRouterOutlet id="main">

and if I try to put anything between the IonRouterOutlet and the IonTabBar, then it’s not visible. If I try to remove the IonTabs and have the IonRouterOutlet outside, then the IonTabs are floating at the top of the screen. :frowning: