Tabs in ion-content


In my app I’ve a screen which follows a master detail pattern: the master screen displays a list of contracts and the detail view displays one contract.
This contract can have one or several financial simulations.

The state of my detail view is as follows: url: “/contract/:contractId/:simulationId?” (the second parameter is optionnal)

My detail view has the following architecture:

<ion-view title="...">
  <ion-content> <!-- yep I read that tabs shouldn't be placed inside ion-content -->
    <!-- Some contract informations... -->


Instead of the “[…]”, I would like to display tabs. I don’t want them to be at the top or bottom of the page, I don’t want their ion-tab content to overlap my screen’ content. Everything I tried failed. I’m looking for something near the jQuery UI’ tab (

I’ve two last requirements: if the simulationId exists, the matching tab should be active. Finally, in my dreams, I’d like to have an horizontal touchable scroll on the tabs (if there are more than 3 or 4 simulations). But I think that this last requirement is not compatible with my touchable side menu, isn’t it?

Thanks in advance to anyone who could help me,
Maybe someone such as @max could give a quick “feasible or not flag” :smile:


Check this CodePen:
It’ll give you an idea of what my page looks like.

For those who are interested, check my solution using ion-scroll:

I used a slidebox for a somewhat tab like behaviour inside a page… works and looks great ! here look at the demo:

1 Like

Works nice too! However, ion-scroll allows unlimited items: vs

Am having the same issue, the link to your codepen does not work for me!!
Can you help with this ?
Thank you