Tab-like Sidemenu

Maybe someone can help…
I want the links in a side menu work in the same way as they work on a tab bar: each link has its own view. E.g. I have “Home”, “Settings” and “About” as menu items. When I change from “Home” to “Settings” to “About” there must not be a “back” icon in the navigation bar and any page transition.
I could imagine this is already implemented in some way and I am just to stupid to find the right place in the docs…

Hey cauboy, I have the same issue. Did you you find a solution? Share it thanks

You could just wire up a bunch of separate views as templates then make a static side menu that just links to each view? Then in each view, define the left button, right button, and if you want a back button or not

<view title="'Title'" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">…</view>

Thanks mhartington, Could you explain better what you mean, I have tried various examples that I found in this forum regarding this issue, but have not had the desired result.

@andrea No problem. Similar to the tab bar example, where each tab is a different view, you could create an abstract state that has the side menu either left or right with static links, then in the content create a empty nav-view where the content will be displayed. Have you seen this codepen? This should get you in the right direction

Sure, I’ve seen and also tried this example but unfortunately I can not properly close the menu with the $scope.sideMenuController.toggleLeft(); Can you help me?

I had that issue too. For that I created a global controller that has this function.

$scope.toggleMenu = function () {

Then for each link i have an ng-click directive on it

<a ng-click="toggleMenu()"></a>

Does this help?

Yes I tried, and it works. Finally I removed the animation properties. I don’t like the effect that produce when I close the sidemenu.
Any ideas?

What effect is that, the sliding and closing of the menu at the same time? Could you post a demo of what you have and I could see what this problem is?

Exactly, the effect is that, below you can find the code I used. If you add the property animation=“slide-left-right” you’ll get the effect I was talking about.

        <div ng-controller="MainCtrl">

    <script id="nav.html" type="text/ng-template">
            <pane side-menu-content>
                <nav-bar animation="nav-title-slide-ios7"
                <nav-view name="navContent"></nav-view>
            <side-menu side="left" ng-controller="SideCtrl">
                <header class="bar bar-header bar-dark">
                    <div class="title">Left Menu</div>
                <content has-header="true" class="bg-dark">
                    <ul class="list">
                        <a href="#/nav/courts" class="item bg-dark" ng-click="toggleMenu()">courts</a>
                        <a href="#/nav/members" class="item bg-dark" ng-click="toggleMenu()">members</a>

    <script id="courts.html" type="text/ng-template">
        <view title="'Courts'" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons">
            <content has-header="true" padding="true">
                <a href="#/nav/week" class="item">week</a>

    <script id="week.html" type="text/ng-template">
        <view title="'Week'">
            <content has-header="true" padding="true">
                <a href="#/nav/courts" class="item">courts</a>

    <script id="members.html" type="text/ng-template">
        <view title="'Members'" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons">
            <content has-header="true" padding="true">

    function($stateProvider, $urlRouterProvider) {
    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here:
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js

        .state('nav', {
            url: '/nav',
            abstract: true,
            templateUrl: 'nav.html'
        .state('nav.courts', {
            url: '/courts',
            views: {
                'navContent': {
                    templateUrl: "courts.html",
                    controller: 'CourtsCtrl'
        .state('nav.week', {
            url: '/week',
            views: {
                'navContent': {
                    templateUrl: "week.html",
                    controller: 'WeekCtrl'
        .state('nav.members', {
            url: '/members',
            views: {
                'navContent': {
                    templateUrl: "members.html",
                    controller: 'MembersCtrl'

    // if none of the above states are matched, use this as the fallback

@andrea Yeah I see what you mean now that I’ve taken that animation off. It does look a lot bette with out the animation, much smoother.

Hi! There is no codes, out of link. Could you give me a new link?