Persisting tabbar across all views


#1

Hi all,

I’m looking to use the tabbar as a general form of navigation for my app. It works fine when navigating to a tab or page that is a child of the current tab however when navigating to a standalone page which does not come under one of the tabs I lose the tabbar. In short I would like for the tabbar to stay on the page across all views as the primary source of navigation even when visiting a page that does not logically come under one of the tabs.

Is there a good way to achieve this while still using the ionic tabbar and thus keeping all the out of the box functionality that comes with it? As an alternative I’ve looked at implementing a custom tabbar/footer possibly by using the ionic toolbar component however I thought I would throw the question out to the community before I got stuck in to see if anyone has come across a similar issue?


#2

Have you found a solution? Regrats


#3

For the app we are currently building ( testing on IOS and Android ) yes we have found a solution of sorts. It’s a bit hacky though. As far as I know Ionic doesn’t really offer this out the box. So to persist a tab for a given page without having that tab appear on the tabbar we do the following…

  1. Add the page as a tab.
  2. Hide the newly added page’s tab from the tabbar with css.

If you use this solution the css you use to hide the tabs you don’t want to show might look something like this… ( in the case here there would be four tabs you want to show in the tabbar and then all of the tabs after that would be those that you want to hide )

tabbar > .tab-button:nth-child(n+5) {
    display: none;
}

#4

Thanks for quick response. where you found this haack ? :slight_smile: Its strange but its working. Im using sidemenu with tabs, and with this css code all works fine.


#5

It’s not a documented solution. It’s just something I worked out for the app I’m currently building. We have a sidemenu on this app as well and we haven’t noticed a problem thus far!