Add side menu in OnsenUI

I am trying to add a side menu in my Onsenui app but it isnt showing up. I am using <ons-tabbar-item> approach so not sure how I would go about adding a menu in the <ons-tabbar-item> section below:

<body>

<ons-sliding-menu var="app.menu" main-page="dashboard.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page>
   <a href="">test</a>
  </ons-page>
</ons-template>

<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">

        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" ng-click="app.menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</body>

Solution

There is no need for ons-navigator if you are already using ons-tabbar and ons-sliding menu as you can perform the navigation using these two elements.

Here is a CodePen example about how to combine tabbar and sliding-menu:

http://codepen.io/andipavllo/pen/RrdPNo

Here is the code:

<ons-tabbar var="tabbar">
  <ons-tabbar-item icon="ion-stop" label="menu" page="hoge.html" active="true"></ons-tabbar-item>
  <ons-tabbar-item icon="ion-stop" label="menu" page="page2.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="hoge.html">
  <ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" type="overlay" max-slide-distance="250px">
    </ons-navigator>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 1</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tabbar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 2</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tab bar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(0)">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(1)">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

Hope it helps!