Elegant way to customise Tabs header

I’m using a <ion-tabs> in my project and instead of a navbar in the header, I would like to show a custom header with some elements (avatar, a header, some extra info).

The ion-tabs directive creates a <template navbar-anchor></template> in which it usually renders the navbar.
I would like to place my own custom element in it.
Instead of hacking my element into it with some DOM replace-element script, I wonder if there is an elegant solution to this. Is there some way I can hook the navbar-anchor to my own element?

Hey there!

Hmm :thinking:

So maybe you could explain a bit more as to what you’re trying to do. Not sure I follow

I want to accomplish the following rendering of ion-tabs;

        <section class="header">
                <ion-col width-20="">
                    <img src="some-image">
            <ion-col width-80="">
        <tabbar role="tablist">

The ion-navbar-section is normally used for the navbar, but in this case I would like to place other content in it.

So something like this isn’t currently possible with ion-navbar.

actually, I found that by not treating the tabs as it’s own ViewController I can accomplish what I want;

I have a page with ion-tabs as well as other elements (the header I tried to squeeze into the ion-tabs).
When navigating back, only the ion-tabs are animated (slide-effect) but the other content is not animated.

If I go to tabs.js and comment out the if (viewCtrl) block in the constructor, my main page is treated as the ViewController and the ion-tabs are static.
So I have to figure out how to prevent the dependency injector to not pass a ViewController to the Tabs element.

Regarding this, I am trying to insert the navbar into a custom component like this:

<my-navbar [title] = "pageTitle"></my-navbar> <ion-content> ...... ...... ..... </ion-content>


<ion-navbar *navbar primary> <ion-title>{{ title }}</ion-title> </ion-navbar>

But when I am using Tabs my-navbar component is not inserted in ion-navbar-section, but in ion-content.
With side-menu works fine.

How can I make it work?