Search docs/

ion-footer

Contents

Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.

Usage

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>
import React from 'react';
import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';

export const FooterExample: React.FC = () => (
  <>
    <IonContent />

    <IonFooter>
      <IonToolbar>
        <IonTitle>Footer</IonTitle>
      </IonToolbar>
    </IonFooter>
  </>
);

Properties

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

translucent

Description

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

Note: In order to scroll content behind the footer, the fullscreen attribute needs to be set on the content.

Attributetranslucent
Typeboolean
Defaultfalse