View Source   Improve this doc

ion-nav-bar
Delegate: $ionicNavBarDelegate

If we have an ionNavView directive, we can also create an <ion-nav-bar>, which will create a topbar that updates as the application state changes.

We can add a back button by putting an ionNavBackButton inside.

We can add buttons depending on the currently visible view using ionNavButtons.

Note that the ion-nav-bar element will only work correctly if your content has an ionView around it.

Usage

<body ng-app="starter">
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <!-- where the initial view template will be rendered -->
  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

API

Attr Type Details
delegate-handle
(optional)
 string

The handle used to identify this navBar with $ionicNavBarDelegate.
align-title
(optional)
 string

Where to align the title of the navbar. Available: 'left', 'right', 'center'. Defaults to 'center'.
no-tap-scroll
(optional)
 boolean

By default, the navbar will scroll the content to the top when tapped. Set no-tap-scroll to true to disable this behavior.