ion-header

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

ANGULAR

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

JAVASCRIPT

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

REACT

import React from 'react';import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
export const HeaderExample: React.FC = () => (  <>    <IonHeader>      <IonToolbar>        <IonButtons slot="start">          <IonBackButton defaultHref="/" />        </IonButtons>        <IonTitle>My Navigation Bar</IonTitle>      </IonToolbar>          <IonToolbar>        <IonTitle>Subheader</IonTitle>      </IonToolbar>    </IonHeader>        {/*-- Header without a border --*/}    <IonHeader className="ion-no-border">     <IonToolbar>      <IonTitle>Header - No Border</IonTitle>     </IonToolbar>    </IonHeader>        <IonContent>      <IonHeader collapse="condense">        <IonToolbar>          <IonTitle size="large">My Navigation Bar</IonTitle>        </IonToolbar>      </IonHeader>    </IonContent>  </>);

STENCIL

import { Component, h } from '@stencil/core';
@Component({  tag: 'header-example',  styleUrl: 'header-example.css'})export class HeaderExample {  render() {    return [      <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>    ];  }}

VUE

<template>  <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></template>
<script>import {   IonBackButton,   IonButtons,   IonContent,   IonHeader,   IonTitle,   IonToolbar} from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: {     IonBackButton,     IonButtons,     IonContent,     IonHeader,     IonTitle,     IonToolbar  }});</script>

Properties

collapse

Description	Describes the scroll effect that will be applied to the header condense only applies in iOS mode. Typically used for Collapsible Large Titles
Attribute	collapse
Type	"condense" \| undefined
Default	undefined

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" \| "md"
Default	undefined

translucent

Description	If 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.
Attribute	translucent
Type	boolean
Default	false