# Problem with ion-tab and ion-side-menu on the same page

**URL:** <https://forum.ionicframework.com/t/problem-with-ion-tab-and-ion-side-menu-on-the-same-page/56143>\
**Category:** ionic-v1\
**Created:** [June 29, 2016, 9:21am UTC](https://forum.ionicframework.com/t/problem-with-ion-tab-and-ion-side-menu-on-the-same-page/56143 "2016-06-29T09:21:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![josekron](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/josekron/32/100360_2.png) [@josekron](https://forum.ionicframework.com/u/josekron)\
**Post date:** [June 29, 2016, 9:21am UTC](https://forum.ionicframework.com/t/problem-with-ion-tab-and-ion-side-menu-on-the-same-page/56143/1 "2016-06-29T09:21:22Z")

</div>

Hi, I have a main page with tabs working fine:

```
<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">

      <ion-tab title="Trucks" icon-off="baldeo" icon-on="baldeoON" href="#/tab/darsenas">
        <ion-nav-view name="tab-darsenas"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Tanks" icon-off="manguera" icon-on="mangueraON" href="#/tab/baldeos">
        <ion-nav-view name="tab-baldeos"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Map Tanks" icon-off="map" icon-on="mapON" href="#/tab/mapa">
        <ion-nav-view name="tab-mapa"></ion-nav-view>
      </ion-tab>

</ion-tabs>

```

Now I have to integrate a side menu in this page but the side menu doesn´t fit well without removing ion-tabs. The side menu is “inside” the ion-tabs.

```
<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
  <h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
  <ion-list>
    <ion-item menu-close>
      Help
    </ion-item>
    <ion-item menu-close>
      Incidence
    </ion-item>
    <ion-item menu-close>
      Contact
    </ion-item>
  </ion-list>
</ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <!-- Main content, usually <ion-nav-view> -->
    <ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">

       <ion-tab title="Trucks" icon-off="baldeo" icon-on="baldeoON" href="#/tab/darsenas">
    <ion-nav-view name="tab-darsenas"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Tanks" icon-off="manguera" icon-on="mangueraON" href="#/tab/baldeos">
    <ion-nav-view name="tab-baldeos"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Map Tanks" icon-off="map" icon-on="mapON" href="#/tab/mapa">
    <ion-nav-view name="tab-mapa"></ion-nav-view>
  </ion-tab>
    </ion-tabs>

  </ion-side-menu-content>
</ion-side-menus>

```

Is it possible to have a ion-tab and ion-side-menu on the same page? I would like that the side menu looks like:  
[http://ionicframework.com/docs/api/directive/ionSideMenus/](http://ionicframework.com/docs/api/directive/ionSideMenus/)

Kind Regards

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 29, 2016, 9:54am UTC](https://forum.ionicframework.com/t/problem-with-ion-tab-and-ion-side-menu-on-the-same-page/56143/2 "2016-06-29T09:54:02Z")

</div>

Hello,

I think this is what you are looking for :

> **[Ionic Tabs + Side Menu](http://loring-dodge.azurewebsites.net/ionic-tabs-plus-side-menu/)**
>
> The first choice that you're likely to make when starting an ionic application is which boilerplate template to use and it forces you to ponder on the navigational flow you'd like users to follow. Ionic offers three basic templates to...