Navbar is hidden when using ion-nav-bar directive


Ionic 1.1.0

If I include the ion-nav-bar in index.html, and put one in any other page, then the nav bar stays hidden in that state. Is this the way it is intended to be?

So if I have tabs, then its ideal to include the ion-nav-bar directive in the base page of each individual tab. This makes sense as each tab preserves its history.


there is no need for multiple navbars i think.

the ionicHistory-service handles different navigation-stacks and it will provide this info to this one navbar.
Look into the tab-codepen:

one navbar but each history is handled


Thanks @bengtler for responding. I agree with you on this one. However, this was not the case in ionic v 1.0.1

And in case you are upgrading to the latest release v 1.1.0, like I did, you have to make those changes in order for the navbar not to disappear.

Edit: In codepen samples, you usually have a single html page, but in a fairly large app you would have several templates. And including the ion-nav-bar in the index.html page is a bad idea in case you need to customise the navbar, like including a search button on another page.


i am using it in this way you described it.

But i have a global navbar and a base controller to handle basic stuff. if you need to hide an show buttons you can use
and so on to customize the navbar in a special view.

so no need for extra navbar.

if you have complex logic stuff to handle --> let the base controller handle it and communicate over angularjs-events ($scope.$broadcast, $scope.$emit, $scope.$on).


@bengtler, thats exactly the problem. In case you need to use ion-nav-buttons directive, you will have to nest it under the ion-nav-bar directive in this special page. And in case, you have placed a global ion-nav-bar then the navbar will be hidden on the special page.

I use a global nav bar per tab. That way I can individualize the navar to the tab contents.


you can use the nav-bar-buttons and all other directives directly under ion-view… they do not have to be placed in the ion-nav-bar

look in the example there…


Good to know that :thumbsup: