Navbar

`ion-navbar`

Navbar acts as the navigational toolbar, which also comes with a back button. A navbar can contain a ion-title, any number of buttons, a segment, or a searchbar. Navbars must be placed within an <ion-header> in order for them to be placed above the content. It's important to note that navbar's are part of the dynamic navigation stack. If you need a static toolbar, use ion-toolbar.

Usage

<ion-header>

  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Page Title
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="openModal()">
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Instance Members

`backButtonClick()`

`navCtrl`

`setBackButtonText()`

Set the text of the Back Button in the Nav Bar. Defaults to “Back”.

Input Properties

Attr	Type	Details
color	`string`	The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. For more information, see Theming your App.
hideBackButton	`boolean`	If true, the back button will be hidden.
mode	`string`	The mode determines which platform styles to use. Possible values are: `"ios"`, `"md"`, or `"wp"`. For more information, see Platform Styles.

Toolbar API Docs