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

`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

iOS Material Design Windows Platform

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

Toolbar API Docs