How to implement tabs on top along with side menu

If you want to implement ionic side menus with tabs you have to work a little bit with the configuration for the routing system.

First of all you need to have an abstract state for the menu:

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
})

then you need to add the states for main tab (container) and the each single tab:

.state('app.tabs', {
    url: "/tabs",
    views: {
        'menuContent': {
            templateUrl: "tabs.html",
        }
    }
})

.state('app.tabs.articles', {
    url: "/articles",
    views: {
        'articles-tab': {
        templateUrl: "articles.html",
        controller: 'articlesCtrl'
        }
    }
})

.state('app.tabs.colonies', {
    url: "/colonies",
    views: {
        'colonies-tab': {
        templateUrl: "colonies.html",
        controller: 'coloniesCtrl'
        }
    }
});

as you can see each state inherits from the the main state: app.

The menu (menu.html):

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
         <ion-item nav-clear menu-close href="#/app/tabs">
            Articles & Colonies
         </ion-item>
        <ion-item nav-clear menu-close href="#/app/foo">
            Foo
        </ion-item>        
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

is a standard side menu you can copy from the documentation.
Then you need a template for the tabs (tabs.html):

<ion-view view-title="Articles & Colonies">
    <ion-tabs class="tabs-striped tabs-top tabs-color-assertive">

      <ion-tab title="Articles" ui-sref="app.tabs.articles" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">
            <ion-nav-view name="articles-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Colonies" ui-sref="app.tabs.colonies" icon-on="ion-ios-color-filter" icon-off="ion-ios-color-filter-outline">
            <ion-nav-view name="colonies-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
</ion-view>

this is main container for all the tabs you want to add to your view. it is referenced by the state app.tabs.
As you can see each <ion-tab> contains a <ion-nav-view>.

The attribute ui-sref loads the state for the single tab.
<ion-nav-view> has a name set:

<ion-nav-view name="articles-tab"></ion-nav-view>

this name must match the one defined in the configured state:

.state('app.tabs.articles', {
    url: "/articles",
    views: {
        'articles-tab': {
        templateUrl: "articles.html",
        controller: 'articlesCtrl'
        }
    }
})

Last thing to do is to add the view (template) for the articles and colonies (articles.html):

<ion-view view-title="Articles">
  <ion-content>
    <div class="card">
      <div class="item item-text-wrap">
        Article 1
      </div>
      <div class="item item-text-wrap">
        Article 2
      </div>
      <div class="item item-text-wrap">
        Article 3
      </div>      
    </div>
  </ion-content>
</ion-view>

NOTES:

For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS's design specification, but can be configured with the $ionicConfigProvider.

reference here.

Since you want your tabs to be on top I've used the css class tabs-top. Same thing can be achieved using the $ionicConfigProvider with tabs.position(value).

reference here.

The easiest thing to do is play the this plunker a bit and see how it works.