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()

setBackButtonText()

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

Input Properties

Attr Type Details
hideBackButton boolean

If true, the back button will be hidden.

Sass Variables

Property Default Description
$toolbar-order-ios ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, buttons-start: 3, content: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-ios-button-font-size 1.7rem

Font size of the toolbar button

$toolbar-ios-title-font-size 1.7rem

Font size of the toolbar title

$toolbar-ios-title-font-weight 600

Font weight of the toolbar title

$toolbar-ios-title-text-align center

Text alignment of the toolbar title

$toolbar-ios-title-text-color color-contrast($colors-ios, $toolbar-ios-background)

Text color of the toolbar title

$toolbar-ios-button-color color-contrast($colors-ios, $toolbar-ios-background, ios)

Text color of the toolbar button

$toolbar-ios-button-border-radius 4px

Border radius of the toolbar button

$toolbar-ios-button-strong-font-weight 600

Font weight of the strong toolbar button

$navbar-ios-height $toolbar-ios-height

Height of the navigation bar

Property Default Description
$toolbar-order-md ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-md-title-font-size 2rem

Font size of the toolbar title

$toolbar-md-title-text-color color-contrast($colors-md, $toolbar-md-background, md)

Text color of the toolbar title

$toolbar-md-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-md-button-color $toolbar-md-title-text-color

Text color of the toolbar button

$toolbar-md-button-border-radius 2px

Border radius of the toolbar button

$toolbar-md-button-strong-font-weight bold

Font weight of the strong toolbar button

$navbar-md-height $toolbar-md-height

Height of the navigation bar

Property Default Description
$toolbar-order-wp ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-wp-title-padding 0 6px

Padding of the toolbar title

$toolbar-wp-title-font-size 1.5rem

Font size of the toolbar title

$toolbar-wp-title-font-weight bold

Font weight of the toolbar title

$toolbar-wp-title-text-transform uppercase

Text transform of the toolbar title

$toolbar-wp-title-text-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar title

$toolbar-wp-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-wp-button-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar button

$toolbar-wp-button-border-radius 2px

Border radius of the toolbar button

$toolbar-wp-button-strong-font-weight bold

Font weight of the strong toolbar button

$navbar-wp-height $toolbar-wp-height

Height of the navigation bar

Related

Toolbar API Docs

API

Native

General