Combine side menu with tabs bar

Hello there!

I’ve been playing around with Ionic for the last two days and it’s amazing! I feel alive again :smile:

Working on a prototype user interface, I wanted to have navigation on both bottom and left of the screen. The most important things on the tab bar and some other links on the side menu.

First I tried to wrap the tab starter template with a side menu (and it worked) but when I click a side menu button the tabs disappear. I understand why this is happening but I’m trying to figure a way to allow side menu buttons to open content in the area above the tabs.

One solution is to start with the side menu starter template and add the tabs manually (without using the directives). This should work just fine, but I’m afraid I’m missing something regarding the router/history. Are there any downside on using this approach?

To conclude, several questions:

  1. Is this bad UX to begin with?
  2. If I want to do this, what’s the best approach?


P.S. Where can I find a good documentation for the router? I’m not able to understand how the nesting is done and neither how the history is built. The current Angular UI Router syntax seems to be different than Ionic’s.

A good presentation on UI Router can be found here: