Top bar tabs, no header

Hi, as per title I’d need my app to have a top bar with 3 tabs in the center, a menu icon on the left and another icon on the right.
Is it possible to achieve it with ionic?

Thanks in advance for your replies :smile:

So basically 5 items in one header? Seems crowded, but I guess it could work.

As far as I know it isn’t possible to add tabs within a nav-header element. Instead you could hide the default nav-header in your element by using

<view title="'Home'" hide-nav-bar="true"></view>

And build your own html elements that follow the tabs and your icons.

1 Like

Thanks coen.

I am able to hide the nav header as you suggest but I cannot put the tabs at the top of the app… any suggestion?

What code are you using?

Could you knock up something similar to this?

Use the header bar button styling…?

Thanks, I’ll try with that but honestly it feels like a hack :confused:
I think the team is working on keeping (or replicating) the scroll position while switching tabs, therefore this solution would prevent me to be able to access this feature when it will be made available.

The sad part is that the tabs functionality is tightly coupled with their presentation. As a new ionic user, I expected to be able to declare them on a ul and to be free to position it in a top/bottom nav bar, or, why not, even in the content.

I may be misinterpreting how they actually work -and if so, I am sorry- but it feels to me that the current implementation is very restrictive and will lead to applications that are very similar in both what they can do and in the way they look.

Thanks for your answers, I really appreciate your efforts.

Actually I think I misinterpreted your problem.

Would a quick .tabs { top: 0; } and hide-nav-bar="true" solve your problem?

1 Like

Hey gregory, thanks! That solved my issue.

Just to clarify it if anyone else stumbles on this, hide-nav-bar=“true” must be on the and the .tabs height must be edited since its height is different from the one of the nav-bar.

This does not work with 1.0.0-beta.12. See codepen -

It does work if you add this:

.tabs { top: 0 !important; }

You must add !important so it overwrites any other styling you may have

This is what i am looking for as well. I am also interested to know if there is a way i could have that navbar code with the “HTML, CSS, JS and RESULT”. I like the little hang down arrow, is it possible to obtain?