ion-nav-buttons
Child of ionNavView

Use nav buttons to set the buttons on your ionNavBar from within an ionView. This gives each view template the ability to specify which buttons should show in the nav bar, overriding any default buttons already placed in the nav bar.

Any buttons you declare will be positioned on the navbar’s corresponding side. Primary buttons generally map to the left side of the header, and secondary buttons are generally on the right side. However, their exact locations are platform-specific. For example, in iOS, the primary buttons are on the far left of the header, and secondary buttons are on the far right, with the header title centered between them. For Android, however, both groups of buttons are on the far right of the header, with the header title aligned left.

We recommend always using primary and secondary, so the buttons correctly map to the side familiar to users of each platform. However, in cases where buttons should always be on an exact side, both left and right sides are still available. For example, a toggle button for a left side menu should be on the left side; in this case, we’d recommend using side="left", so it’s always on the left, no matter the platform.

Note that ion-nav-buttons must be immediate descendants of the ion-view or ion-nav-bar element (basically, don’t wrap it in another div).

Usage

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="primary">
      <button class="button" ng-click="doSomething()">
        I'm a button on the primary of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

API