Search docs/

ion-title

Contents

ion-title is a component that sets the title of the Toolbar.

Usage

<!-- Default title -->
<ion-toolbar>
  <ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Small title above a default title -->
<ion-toolbar>
  <ion-title size="small">Small Title above a Default Title</ion-title>
</ion-toolbar>
<ion-toolbar>
  <ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Large title -->
<ion-toolbar>
  <ion-title size="large">Large Title</ion-title>
</ion-toolbar>

Collapsible Large Titles

Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your ion-title, ion-header, and (optionally) ion-buttons elements.

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

<ion-content>
  <ion-header collapse="condense">              
    <ion-toolbar>      
      <ion-title size="large">Settings</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

In the example above, notice there are two ion-header elements. The first ion-header represents the "collapsed" state of your collapsible header, and the second ion-header represents the "expanded" state of your collapsible header. Notice that the second ion-header must have collapse="condense" and must exist within ion-content. Additionally, in order to get the large title styling, ion-title must have size="large".

<ion-header>
  <ion-toolbar>   
    <ion-buttons collapse="true">
      <ion-button>Click Me</ion-button>
    </ion-buttons> 
    <ion-title>Settings</ion-title>               
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">              
    <ion-toolbar>      
      <ion-buttons collapse="true">
        <ion-button>Click Me</ion-button>
      </ion-buttons>
      <ion-title size="large">Settings</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

In this example, notice that we have added two sets of ion-buttons both with collapse="true". When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an ion-title element.

ion-buttons elements that do not have collapse set will always be visible, regardless of collapsed state.

<!-- Default title -->
<ion-toolbar>
  <ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Small title above a default title -->
<ion-toolbar>
  <ion-title size="small">Small Title above a Default Title</ion-title>
</ion-toolbar>
<ion-toolbar>
  <ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Large title -->
<ion-toolbar>
  <ion-title size="large">Large Title</ion-title>
</ion-toolbar>

Collapsible Large Titles

Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your ion-title, ion-header, and (optionally) ion-buttons elements.

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

<ion-content>
  <ion-header collapse="condense">              
    <ion-toolbar>      
      <ion-title size="large">Settings</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

In the example above, notice there are two ion-header elements. The first ion-header represents the "collapsed" state of your collapsible header, and the second ion-header represents the "expanded" state of your collapsible header. Notice that the second ion-header must have collapse="condense" and must exist within ion-content. Additionally, in order to get the large title styling, ion-title must have size="large".

<ion-header>
  <ion-toolbar>   
    <ion-buttons collapse="true">
      <ion-button>Click Me</ion-button>
    </ion-buttons> 
    <ion-title>Settings</ion-title>               
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">              
    <ion-toolbar>      
      <ion-buttons collapse="true">
        <ion-button>Click Me</ion-button>
      </ion-buttons>
      <ion-title size="large">Settings</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

In this example, notice that we have added two sets of ion-buttons both with collapse="true". When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an ion-title element.

ion-buttons elements that do not have collapse set will always be visible, regardless of collapsed state.

import React from 'react';
import {
  IonTitle,
  IonToolbar
} from '@ionic/react';

export const ToolbarExample: React.FC = () => (
  {/*-- Default title --*/}
  <IonToolbar>
    <IonTitle>Default Title</IonTitle>
  </IonToolbar>

  {/*-- Small title --*/}
  <IonToolbar>
    <IonTitle size="small">Small Title above a Default Title</IonTitle>
  </IonToolbar>
  <IonToolbar>
    <IonTitle>Default Title</IonTitle>
  </IonToolbar>

  {/*-- Large title --*/}
  <IonToolbar>
    <IonTitle size="large">Large Title</IonTitle>
  </IonToolbar>
);

Collapsible Large Titles

Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your IonTitle, IonHeader, and (optionally) IonButtons elements.

import React from 'react';
import {
  IonContent,
  IonHeader,
  IonSearchbar,
  IonTitle,
  IonToolbar
} from '@ionic/react';

export const LargeTitleExample: React.FC = () => (
  <>
    <IonHeader>
      <IonToolbar>    
        <IonTitle>Settings</IonTitle>               
      </IonToolbar>
    </IonHeader>

    <IonContent>
      <IonHeader collapse="condense">              
        <IonToolbar>      
          <IonTitle size="large">Settings</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonSearchbar></IonSearchbar>
        </IonToolbar>
      </IonHeader>

      ...

    </IonContent>
  </>
);

In the example above, notice there are two IonHeader elements. The first IonHeader represents the "collapsed" state of your collapsible header, and the second IonHeader represents the "expanded" state of your collapsible header. Notice that the second IonHeader must have collapse="condense" and must exist within IonContent. Additionally, in order to get the large title styling, IonTitle must have size="large".

import React from 'react';
import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonSearchbar,
  IonTitle,
  IonToolbar  
} from '@ionic/react';

export const LargeTitleExample: React.FC = () => (
  <>
    <IonHeader>
      <IonToolbar>   
        <IonButtons collapse="true">
          <IonButton>Click Me</IonButton>
        </IonButtons> 
        <IonTitle>Settings</IonTitle>               
      </IonToolbar>
    </IonHeader>

    <IonContent>
      <IonHeader collapse="condense">              
        <IonToolbar>      
          <IonButtons collapse="true">
            <IonButton>Click Me</IonButton>
          </IonButtons>
          <IonTitle size="large">Settings</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonSearchbar></IonSearchbar>
        </IonToolbar>
      </IonHeader>

      ...

    </IonContent>
  </>
);

In this example, notice that we have added two sets of IonButtons both with collapse="true". When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an IonTitle element.

IonButtons elements that do not have collapse set will always be visible, regardless of collapsed state.

<template>
  <!-- Default title -->
  <ion-toolbar>
    <ion-title>Default Title</ion-title>
  </ion-toolbar>

  <!-- Small title -->
  <ion-toolbar>
    <ion-title size="small">Small Title above a Default Title</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-title>Default Title</ion-title>
  </ion-toolbar>

  <!-- Large title -->
  <ion-toolbar>
    <ion-title size="large">Large Title</ion-title>
  </ion-toolbar>
</template>

Collapsible Large Titles

Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your ion-title, ion-header, and (optionally) ion-buttons elements.

<template>
  <ion-header>
    <ion-toolbar>    
      <ion-title>Settings</ion-title>               
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-header collapse="condense">              
      <ion-toolbar>      
        <ion-title size="large">Settings</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-searchbar></ion-searchbar>
      </ion-toolbar>
    </ion-header>

    ...

  </ion-content>
</template>

In the example above, notice there are two ion-header elements. The first ion-header represents the "collapsed" state of your collapsible header, and the second ion-header represents the "expanded" state of your collapsible header. Notice that the second ion-header must have collapse="condense" and must exist within ion-content. Additionally, in order to get the large title styling, ion-title must have size="large".

<template>
  <ion-header>
    <ion-toolbar>   
      <ion-buttons collapse="true">
        <ion-button>Click Me</ion-button>
      </ion-buttons> 
      <ion-title>Settings</ion-title>               
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-header collapse="condense">              
      <ion-toolbar>      
        <ion-buttons collapse="true">
          <ion-button>Click Me</ion-button>
        </ion-buttons>
        <ion-title size="large">Settings</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-searchbar></ion-searchbar>
      </ion-toolbar>
    </ion-header>

    ...

  </ion-content>
</template>

In this example, notice that we have added two sets of ion-buttons both with collapse="true". When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an ion-title element.

ion-buttons elements that do not have collapse set will always be visible, regardless of collapsed state.

Properties

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

size

Description

The size of the toolbar title.

Attributesize
Type"large" | "small" | undefined

CSS Custom Properties

NameDescription
--colorText color of the title