Nav-Bar in Sub-Header


Is it possible to utilize a sub-header as a nav bar?

I currently have a side-menu that each menu item opens a page that has a sub-header. I would like a back button to display in the sub-header and not next to the side-menu icon. Possible? Anyone have example?



You can apply tabs-top to create a top style navigation


But how would you connect the back-button into that so it catches the navView with the back button in that tab bar? Thanks for such a quick response!


I’m afraid I don’t understand what you mean by “catches the navView”. Do you mean have the back button navigate back through the tabs?


Sorry, I mean have the back-button navigate through the views history?

Similar to this:

But the back button displayed in a sub-header.


How this work for you? With some css to override the defaults, you can switch the places of the header and tab bar to get something like this.


You could put a back button icon in that subheader. Then tie it to the navigation stack.

See this sample :

On that sample there are links in the content. Click each. On the third page, a link there will take you “ALL THE WAY BAcK” to the main page.

Here is that code:

$scope.goBack = function() {
    $ionicViewService.goToHistoryRoot("001");  // This takes you all the way back.

To just go back one page, you do this:

$scope.goBack = function() {
    $ionicViewService.getBackView().goBack();  // This takes you back to the last view state.


Thank you both mhartington & Calendee. I think both options will work. I will try to implement them later on tonight.

Thanks again!