Nav-Bar in Sub-Header


#1

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?

Thanks!


#2

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


#3

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!


#4

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?


#5

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

Similar to this: http://codepen.io/ionic/pen/HjnFx

But the back button displayed in a sub-header.


#6

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.


#7

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

See this sample : http://codepen.io/calendee/pen/LshaE

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.
}


#8

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

Thanks again!