Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Navbar

ion-navbar

Improve this doc

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.

Related

Toolbar API Docs

API

Native

General