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

Header

ion-header

Improve this doc

Header is a parent component that holds the navbar and toolbar component. It's important to note that ion-header needs to be one of the three root elements of a page

Usage

<ion-header>
  <ion-navbar>
    <ion-title>Page1</ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

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-top 0

Padding top of the toolbar title

$toolbar-wp-title-padding-end 6px

Padding end of the toolbar title

$toolbar-wp-title-padding-bottom $toolbar-wp-title-padding-top

Padding bottom of the toolbar title

$toolbar-wp-title-padding-start $toolbar-wp-title-padding-end

Padding start 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

API

Native

General