Both side menu and top bar tab menu, like Tinder

Hey

is that possible and how to create an app with a side menu and tabs in the top bar, like Tinder app ?

See on the picture the side-menu button as well as the 3 tabs in the top bar.

Thanks

In this case the best choise is to separate side menu and tabs. Try to start ionic tabs template and then add side menu to it.

Hi @bobrov1989, thanks for your answer.
Do you think you can help me further by showing me in this codepen how to move the tabs up to the top ? (Maybe this will be helpful for others too).

See the Pen Ionic Tabs And Navigation: v0.9.26 by Louis (@LouisDoe) on CodePen.

Thanks a lot

Hi, can someone please help me insert tabs in the header of a side menu app ?

may be you can use not tabs directives, but simple buttons with tabs css classes? It will look like tabs but functionally will be buttons with links to view.

Ok that’s a good idea, can you point to how to put buttons in the top bar in a side menu app ?

http://ionicframework.com/docs/api/directive/ionNavButtons/ - here the example from docs.
you need to add buttons to nav-bar inside side menu content

I am a newbie ! Can someone demonstrate this with a snippet of code ? This would really help me, thanks :wink:

Please help ! I tried in this CodePen, but can’t get the tabs in the top bar:

See the Pen Ionic Tabs And Navigation: v0.9.26 by Louis (@LouisDoe) on CodePen.

just add nav buttons to ion-nav-bar in menu.html template and add tabs classes to them.
also to set active state to them according to current view use ui-sref-active directive.

Hi brobrov1989
That’s what I did:

<ion-nav-bar animation="nav-title-slide-ios7" 
             type="bar-positive" 
             left-buttons="leftButtons"
             back-button-type="button-icon" 
             back-button-icon="ion-arrow-left-c">
               <ion-nav-buttons side="right">
                 <button class="button tabs" ui-sref="home" ui-sref-active="active" ng-click="go('#/main/tab/home')">
                   Home button
                 </button>
                 <button class="button tabs" ui-sref="about" ui-sref-active="active" ng-click="go('#/main/tab/about')">
                   About button
                 </button>
               </ion-nav-buttons>
             </ion-nav-bar>

and the buttons do not show… (see the codePen).

why you dublicate ui-sref with ng-click?
also I see 404 error in console

I updated the codePen, removed the ng-click and updated to the last version of ionic…
Now we see the button, but the side menu is down…

Like this ?

Or if your want with navigation :

Finally, with ionic 1, I did this, using the useful ui-sref-active and ui-sref directives.

menu.html:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content drag-content="false">
    <ion-nav-bar class="bar-dark nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear button-icon"><i class="icon ion-ios-arrow-back"></i></ion-nav-back-button>
      <ion-nav-buttons side="right">        
        <button class="button" ui-sref="app.weightlevel" ui-sref-active="currentNav" >
          <i class="icon ion-android-person"></i>
        </button>
        <button class="button" ui-sref="app.recoVol" ui-sref-active="currentNav" >
          <i class="icon ion-ios-pint"></i>
        </button>
        <button class="button" ui-sref="app.compare" ui-sref-active="currentNav">
          <i class="icon ion-ios-search-strong"></i>
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="left">
          <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
      <h1 class="title sidemenutitle"><span class="bold">B</span><span>L</span></h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.weightlevel" ui-sref-active="active">
          <span translate="menu.1">
            Board Calculator
          </span>
          <i class="icon ion-erlenmeyer-flask"></i>
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.volCompute" ui-sref-active="active">
            {{ 'menu.12' | translate }}
          <i class="icon ion-ios-color-wand"></i>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>