# Using sidemenu and tabs together **URL:** \ **Category:** ionic-v1\ **Created:** [March 26, 2014, 9:40pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311 "2014-03-26T21:40:59Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![programming\_kid](https://avatars.discourse-cdn.com/v4/letter/p/6a8cbe/32.png) [@programming\_kid](https://forum.ionicframework.com/u/programming_kid)\ **Post date:** [March 26, 2014, 9:40pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/1 "2014-03-26T21:40:59Z")
i am trying ionic from past couple of days and i am trying to make an app with sidemenu and tabs together but i am not able to put it together it should look something like this ![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/359/78864fd0bcde57d3.png) Whatever i try i am not able to get it working all i managed to make was this [http://codepen.io/anon/pen/CAsKn](http://codepen.io/anon/pen/CAsKn) which is far from what i intended above . can anyone please help me and guide me in right direction can you please give some code samples to build upon please help ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 26, 2014, 10:23pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/2 "2014-03-26T22:23:02Z")
I forked your example and got the sidemenu working. It could use a little beautification. [http://codepen.io/gnomeontherun/pen/tbvdH](http://codepen.io/gnomeontherun/pen/tbvdH) You had the sidemenu inside of one of the tabs pages, where you wanted to put it as the root element and have the ion-nav-view load into the ion-side-menu-content directive. $ionSideMenuDelegate is now available and has to be used to trigger the sidemenu to open or close. I added a controller and openMenu() method that handles this. ---
**Author:** ![programming\_kid](https://avatars.discourse-cdn.com/v4/letter/p/6a8cbe/32.png) [@programming\_kid](https://forum.ionicframework.com/u/programming_kid)\ **Post date:** [March 27, 2014, 6:20am UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/3 "2014-03-27T06:20:40Z")
i think side menu is broken as one of its menu item is not visible ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 27, 2014, 3:41pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/4 "2014-03-27T15:41:55Z")
The functionality is working, I just didn’t use the `ion-header-bar` component and so it didn’t add the padding. I updated my example [http://codepen.io/gnomeontherun/pen/tbvdH](http://codepen.io/gnomeontherun/pen/tbvdH) ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 27, 2014, 5:27pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/5 "2014-03-27T17:27:06Z")
Thanks @gnomeontherun. Do you know how to add a right hand side menu to the `ionic-angular-cordova-seed` project on github: [https://github.com/driftyco/ionic-angular-cordova-seed](https://github.com/driftyco/ionic-angular-cordova-seed) _without_ breaking the tabs or the back arrow history? Many have tried, all have failed. Any advice would be appreciated. ---
**Author:** ![programming\_kid](https://avatars.discourse-cdn.com/v4/letter/p/6a8cbe/32.png) [@programming\_kid](https://forum.ionicframework.com/u/programming_kid)\ **Post date:** [March 27, 2014, 8:24pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/6 "2014-03-27T20:24:18Z")
@gnomeontherun thanks for help, here i managed to get it working in some way can you please have a look and give some guidance if i am doing it in right way > **[Plunker - Untitled](http://plnkr.co/edit/SJk6EgmDcmuisrxTgern?p=preview)** > > Created on https://plnkr.co: Helping you build the web. ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 31, 2014, 2:02pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/7 "2014-03-31T14:02:59Z")
@programming_kid you will want to add [menu-close](http://ionicframework.com/docs/api/directive/menuClose/) to your links in the left bar so it will close the side menu upon click/tap. You may also want to use `nav-clear`, but that depends on if you want the back button and animations or not. ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 31, 2014, 2:14pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/8 "2014-03-31T14:14:27Z")
@mbyrne History is based on standard links. There is a new `nav-clear` directive that you can apply to any link that will stop the back button. I added it to the Home in the left side menu, so if you go somewhere and then Home, it won’t show the back arrow. [http://codepen.io/gnomeontherun/pen/tbvdH](http://codepen.io/gnomeontherun/pen/tbvdH) ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 31, 2014, 3:15pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/9 "2014-03-31T15:15:51Z")
thank you! I will check this out right now. ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 31, 2014, 7:26pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/10 "2014-03-31T19:26:07Z")
So I have worked with what you posted and it is very useful. One question though is if I want something on the side menu, like a link to a Settings page, how would I define the state and view in the index.js? You have the all the side menu links going to pages that exist only in the tab structure, how would I link to another non-tab page (that is, appended to index.html as a template called e.g. settings.html)? I already created that page (it is viewable if I temporarily rename it as one of the tabs), changed the anchor in the side menu code `Search` and tried to update the ui-router state provider in index.js but I think I have something about the syntax wrong with the link in the side menu and/or in the state provider. How would you write this `.state('search', { url: "/search", views: { 'search': { templateUrl: "search.html" } } })` to reference a page that is not on the tabs, but that is an html template within the index.html page? I know I am doing something syntactically wrong because of my lack of understanding of ui-route and state and appreciate any guidance. ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 31, 2014, 7:47pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/11 "2014-03-31T19:47:39Z")
I’m not an expert on ui-router either, haven’t used it until I started with Ionic last week. However I’ve updated my codepen to route to a new view not in the tabs. You can see I added two new states to the top (search and settings) and then added templates to the bottom of the HTML and updated the navigation. ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 31, 2014, 8:14pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/12 "2014-03-31T20:14:06Z")
This is fantastic. One question though is that the tab disappears for the settings and search pages. How can I keep the same tabs for the side menu pages? ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 31, 2014, 8:31pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/13 "2014-03-31T20:31:02Z")
Tabs are declared inside of the tabs abstract template. Since the search/settings views aren’t children of the `tabs` state, they won’t have the tabs. You would either have to make a tab that has multiple children states inside of it (sounds kind of tricky and delicate) or manually add tabs to the footer. I think your best option is to make a footer that has the same icon/text links as the tabs, because the tab directive creates one pane per tab. ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 31, 2014, 8:41pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/14 "2014-03-31T20:41:08Z")
All right, that gets to the heart of the issue with tabs and side menu. Manually adding a tab footer to each side menu page makes sense, but doesn’t seem very DRY. I think I will attempt to make a tab with multiple children and see how quickly I trainwreck things… Again, I really appreciate the guidance and help. ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [March 31, 2014, 10:59pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/15 "2014-03-31T22:59:52Z")
okay, so I tried manually adding the tab bar and that worked fine too. ---
**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\ **Post date:** [March 31, 2014, 11:26pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/16 "2014-03-31T23:26:26Z")
Awesome, to make it DRY make it a template and use `ng-include`. ---
**Author:** ![programming\_kid](https://avatars.discourse-cdn.com/v4/letter/p/6a8cbe/32.png) [@programming\_kid](https://forum.ionicframework.com/u/programming_kid)\ **Post date:** [April 1, 2014, 6:23am UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/17 "2014-04-01T06:23:28Z")
@mbyrne can u share pen for sidemenu with tabs pls ---
**Author:** ![norman784](https://avatars.discourse-cdn.com/v4/letter/n/7993a0/32.png) [@norman784](https://forum.ionicframework.com/u/norman784)\ **Post date:** [April 1, 2014, 6:38am UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/18 "2014-04-01T06:38:32Z")
I got this [http://codepen.io/norman784/pen/Ahwdg](http://codepen.io/norman784/pen/Ahwdg) but seems that ion-tabs but seems that it mess with the side menu and you got an empty left menu bar alto with the list got another issue that I described here [Side menu + List + tab bar issue (side menu stop working)](http://forum.ionicframework.com/t/side-menu-list-tab-bar-issue-side-menu-stop-working/2486) ---
**Author:** ![mbyrne](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbyrne/32/91428_2.png) [@mbyrne](https://forum.ionicframework.com/u/mbyrne)\ **Post date:** [April 1, 2014, 1:05pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/19 "2014-04-01T13:05:18Z")
The most updated pen is at: https://codepen.io/gnomeontherun/embed/preview/tbvdH?height=300&slug-hash=tbvdH&default-tabs=html,result&host=https://codepen.io @gnomeontherun wrote it and it solves tabs and side menu (s) (there is a left and right menu) It was updated by @gnomeontherun to show the case of having the side menu items (in this pen it is the right menu items) link to a page that is not under one of the tabs, like the those left menu items are. If you want the right side items to have a tab, you can add that manually( I cut and pasted my tabs code from tabs.html into that side menu item’s template) or you can put those items under one of the tabs in the index.js $statProvider code, just copy the format of, for example, how the “facts” view is defined and put the view of the side menu item under a tab in the same way. If you don’t put the side menu page under a tab and want to add a tab bar to it manually into its template, you can also us `ng-include` to keep it Don’t Repeat Yourself DRY. Other wise you will possibly, depending on how many non-tab pages you have, need to update your tabs in multiple places which can lead to errors. I haven’t used `ng-include` (or would it be `data-ng-include`) in my situation. I have found that if I put all the side menu pages under one tab ( in this case they all generally pertain to settings and help) then when I navigate the side menu items, they retain back arrow history too, which is feels elegant and useful for how I am using it. Bonus. @gnomeontherun has mentioned that doing this might cause issues with child states, but I don’t know enough yet to anticipate what problems this might cause. ---
**Author:** ![norman784](https://avatars.discourse-cdn.com/v4/letter/n/7993a0/32.png) [@norman784](https://forum.ionicframework.com/u/norman784)\ **Post date:** [April 1, 2014, 7:53pm UTC](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311/20 "2014-04-01T19:53:50Z")
Solved thanks to @Scott answer, check it out their answer and the pen has been updated [Next page](https://forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311.md?page=2)