Nav-back-button is always hidden

For some reason, the ‘ion-nav-back-button’ is always hidden… And I can’t figure out why??
It works correct when i do it manually with a ion-header…

I have the following index.html:

<body ng-app='starter'>
  <ion-nav-bar class="bar-stable" align-title="left" no-tap-scroll="true">
    <ion-nav-back-button class="button-clear">
       <i class="icon ion-arrow-left-c"></i>
  <ion-nav-view name="main"></ion-nav-view>

And the following statesController:

  .state('home', {
    url: '/',
    abstract: true,
    views: {
      main: {
        templateUrl: 'template/home.html',
        controller: 'homePageController'
  .state('messageList', {
    cache: false,
    url: '/messageList',
    views: {
      main: {
        templateUrl: 'template/messageList.html',
        controller: 'messageListController'

And the messageList has this template:

<ion-view class="messageListWrapper" view-title="{{navTitle}}" hide-back-button="false">
  <ion-nav-buttons side="primary">
    <button class="button" ng-click="doSomething()">
      I'm a button on the primary of the navbar!

  <ion-content id="messageListContainer">
    <div ng-repeat="message in messages" class=" clearfix">
      <div class="messageBubble chat-bubble {{message.position}}">

  <ion-footer-bar align-title="left" class="bar-assertive messageListFooter">
    <div class="messageInputWrapper">
      <i href="" class="icon ion-happy-outline"></i>
      <input type="text" placeholder="Send message..." id="sendMessageInput"/>

But for some reason, when I go the MessageList page, the go-back button is never shown… It always has the class 'hide’
Like this:

<ion-nav-bar class="bar-stable nav-bar-container nav-bar-tabs-top" align-title="left" no-tap-scroll="true" nav-bar-transition="ios" nav-bar-direction="exit" nav-swipe="">
  <ion-nav-back-button class="hide"></ion-nav-back-button>
  <div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-stable bar bar-header has-tabs-top" align-title="left" no-tap-scroll="true">
      <button class="button back-button hide buttons button-clear header-item" ng-click="$ionicGoBack()" style="transition-duration: 0ms;">
        <i class="ion-arrow-left-c"></i>
        <span class="back-text" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"><span
          class="default-title hide">Back</span><span class="previous-title">Messages</span></span></button>
      <div class="title title-left header-item" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
        <img class="title-image" src="img/user_male.png">
        <h1 class="title">Kewin</h1></div>

As you can see, the back button always has the class ‘hide’…

Any tips??


same issue ! doing nothing different ! for me whenever i visit a page from sidemenu its always adding hide class to back button ! did you get the solution?

@Sumeet were you able to solve this?

I dropped Ionic… Its a nice framework… But is seems to ‘trap’ you in 1 particular app design… So i just went all ‘Vanilla’ with Cordova, Backbone and Marionette :slight_smile: It needed some tweaks to register the routeChanges (#) to Backbone… But nothing new.

yes @shyamal890 its because of menu-close attribute !

instead of menu-close use menu-toggle="left" on the item in the menu. then the page you navigating to will show the back button


Yes we too dropped ionic for our other projects. but not current one since it has come a long way.
ionic is good but not without crosswalk. which takes atleast 25 MB. Client’s annoy alot.

@Sumeet123 But I didn’t even press the item with menu-close attr.

in my case that was the issue ! on what state you cant see the back button ? is the state first child in nav stack ?

try this too ,

@Sumeet123 I think your reply got truncated

check now :stuck_out_tongue: actually i forgot put it in code block

I am facing the same issue, what do you mean by forgot to put it in code block?