Skip to main content
Version: v5

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

<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