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