<!DOCTYPE html>
<html ng-app="sample">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Side Menu Inside Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
</body>
</html>
## Simple tabs inside side-menu app
Notice how I used one common nav-bar for all views.
Also the arrangement may be a little different from what you'd want, but you get the idea.
var app = angular.module('sample', ['ionic']);
app.controller('MenuCtrl', function($scope, $ionicSideMenuDelegate, $state) {
$scope.openLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/',
abstract: true,
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: 'home',
views: {
'homeView': {
templateUrl: 'home.html'
}
}
})
.state('tabs.menu', {
url: 'menu',
abstract: true,
views: {
'menuView': {
controller: 'MenuCtrl',
templateUrl: 'menu.html'
}
}
})
.state('tabs.menu.main', {
url: '/main',
views: {
'menuContentView': {
templateUrl: 'main.html'
}
}
})
.state('tabs.menu.about', {
url: '/about',
views: {
'menuContentView': {
templateUrl: 'about.html'
}
}
})
.state('tabs.settings', {
url: 'settings',
views: {
'settingsView': {
templateUrl: 'settings.html'
}
}
});
$urlRouterProvider.otherwise('/home');
});
<ion-view title="About">
<ion-nav-buttons>
<button class="button button-icon button-clear ion-navicon" ng-click="openLeft()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<div class="card">
<p class="item item-text-wrap">
This is a sample app. Just a demo. Plus, there's a sidemenu!!!
</p>
</div>
</ion-content>
</ion-view>
<ion-view title="Settings">
<ion-content>
<div class="card">
<p class="item item-text-wrap">
Change something
</p>
</div>
</ion-content>
</ion-view>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="" href="#/home">
<ion-nav-view name="homeView"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-gear-a" href="#/settings">
<ion-nav-view name="settingsView"></ion-nav-view>
</ion-tab>
<ion-tab title="Menu" icon="ion-navicon-round" href="#/menu/main">
<ion-nav-view name="menuView"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-view title="Home">
<ion-content>
<div class="card">
<p class="item item-text-wrap">
Welcome
</p>
</div>
</ion-content>
</ion-view>
<ion-view title="Main">
<ion-nav-buttons>
<button class="button button-icon button-clear ion-navicon" ng-click="openLeft()"></button>
</ion-nav-buttons>
<ion-content>
<div class="card">
<p class="item item-text-wrap">
This view has a side menu
</p>
</div>
</ion-content>
</ion-view>
<ion-side-menus>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item href="#/menu/about" menu-close>About</ion-item>
</ion-list>
<ion-list>
<ion-item href="#/menu/main" menu-close>Main</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContentView"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>