Skip to main content

ion-header

none

Contents

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

Usage#

<ion-header>  <ion-toolbar>    <ion-buttons slot="start">      <ion-back-button></ion-back-button>    </ion-buttons>    <ion-title>My Navigation Bar</ion-title>  </ion-toolbar>
  <ion-toolbar>    <ion-title>Subheader</ion-title>  </ion-toolbar></ion-header>
<!-- Header without a border --><ion-header class="ion-no-border">  <ion-toolbar>    <ion-title>Header - No Border</ion-title>  </ion-toolbar></ion-header>
<ion-content>  <ion-header collapse="condense">    <ion-toolbar>      <ion-title size="large">My Navigation Bar</ion-title>    </ion-toolbar>  </ion-header></ion-content>

Properties#

collapse#

DescriptionDescribes the scroll effect that will be applied to the header
condense only applies in iOS mode.

Typically used for Collapsible Large Titles
Attributecollapse
Type"condense" ๏ฝœ undefined
Defaultundefined

mode#

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

translucent#

DescriptionIf true, the header will be translucent.
Only applies when the mode is "ios" and the device supports
backdrop-filter.

Note: In order to scroll content behind the header, the fullscreen
attribute needs to be set on the content.
Attributetranslucent
Typeboolean
Defaultfalse