@emccorson But I need tabbar to swipe between tabbar pages.

Hi,
I need to open side menu on tabbar pages and outside tabbar pages. But I am only able to open it on tabbar pages. Could someone please advice on how to open side menu from outside tabbar pages?

Here below I have given all the components. I am able to open menu from dashboard page but I also need to open it from member page.

<!-- Theis is the navigator -->
<ons-navigator id=“appNavigator” swipeable swipe-target-width=“80px” page=“login.html”>
</ons-navigator>

<!-- The Splitter Page -->
<template id=“home_splitter.html”>
<ons-page id=“home_splitter”>
<ons-splitter id=“appSplitter”>
<ons-splitter-side id=“usermenu” page=“usermenu.html” side=“right” collapse="" width=“200px”>
</ons-splitter-side>
<ons-splitter-content page=“tabbar.html”></ons-splitter-content>
</ons-splitter>
</ons-page>
</template>

<!-- Tabbar -->
<template id=“tabbar.html”>
<ons-page id=“tabbar-page”>
<ons-toolbar>
<ons-fab class=“right user-icon” onclick=“fn.userMenu()”>
<img class=“user-img” src=“car.jpg” alt=“User”>
</ons-fab>
</ons-toolbar>

    <ons-tabbar swipeable id="appTabbar" position="auto">
        <ons-tab label="Dashboard" icon="ion-home" page="dashboard.html"></ons-tab>
        <ons-tab label="Plan & Reports" icon="ion-home" page="planAndReports.html"></ons-tab>
        <ons-tab label="Support" icon="ion-home" page="support.html"></ons-tab>
    </ons-tabbar>
    </script>
</ons-page>

</template>

<!-- Menu–>
<template id=“usermenu.html”>
<ons-page>
<ons-list>
<ons-list-item onclick=“fn.logout()”>
<div class=“left”>
<i class=“icon ion-md-log-out dashboard-icon”></i>
</div>
<div class=“center”>
Sign Out
</div>
</ons-list-item>
</ons-list>
</ons-page>
</template>

<!-- dashboard page -->
<template id=“dashboard.html”>
<ons-page>
<h1>Hi</h1>
</ons-page>
</template>

<!-- member page -->
<template id=“member.html”>
<ons-page id=“member”>
<ons-toolbar>
<div class=“left”>
<ons-back-button>Back</ons-back-button>
</div>
<div class=“center”>Member</div>
<ons-fab class=“right user-icon” onclick=“fn.open()”>
<img class=“user-img” src=“Car.jpg” alt=“User”>
</ons-fab>
</ons-toolbar>
</ons-page>
</template>

//here is the .js function
window.fn.login = function () {
document.getElementById(‘appNavigator’).pushPage(“home_splitter.html”);
};

window.fn.userMenu = function () {
document.getElementById(‘appSplitter’).right.toggle();
}