ion-tab-bar

shadow

The tab bar is a UI component that contains a set of tab buttons. A tab bar must be provided inside of tabs to communicate with each tab.

Usage

Angular

<ion-tabs>
  <!-- Tab bar -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="account">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="call"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Javascript

<ion-tabs>
  <!-- Tab views -->
  <ion-tab tab="account"></ion-tab>
  <ion-tab tab="contact"></ion-tab>
  <ion-tab tab="settings"></ion-tab>

  <!-- Tab bar -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="account">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="call"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

React

import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
import { call, person, settings } from 'ionicons/icons';

export const TabBarExample: React.FC = () => (
  <IonContent>
    <IonTabs>
      {/*-- Tab bar --*/}
      <IonTabBar slot="bottom">
        <IonTabButton tab="account">
          <IonIcon icon={person} />
        </IonTabButton>
        <IonTabButton tab="contact">
          <IonIcon icon={call} />
        </IonTabButton>
        <IonTabButton tab="settings">
          <IonIcon icon={settings} />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  </IonContent>
);

Vue

<template>
  <ion-tabs>
    <!-- Tab bar -->
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="account">
        <ion-icon :icon="person"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon :icon="call"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="settings">
        <ion-icon :icon="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</template>

<script setup lang="ts">
  import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
  import { call, person, settings } from 'ionicons/icons';
</script>

Badges in Tab Buttons

Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.

info

Empty badges are only available for md mode.

Hide Tab Bar

The tab bar can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the scrollEffect property on the tab bar to "hide".

When the tab bar is inside a footer, scrollEffect on the tab bar is ignored. Set it on the footer instead so the whole footer hides together.

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.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Default	undefined

expand

Description	Set to "compact" to display a width based on the items inside the tab bar. This value will only work for the ionic theme. Set to "full" to display a full width tab bar. Defaults to "full".
Attribute	expand
Type	"compact" ｜ "full"
Default	'full'

mode

Description	The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

scrollEffect

Description	Describes the scroll effect that will be applied to the tab bar. "hide" slides the tab bar out of view when scrolling down and back in when scrolling up. Note: "hide" is ignored when the tab bar is nested inside an ion-footer to avoid leaving an empty footer visible on screen. Set scroll-effect="hide" on the footer instead so the entire footer hides together.
Attribute	scroll-effect
Type	"hide" ｜ undefined
Default	undefined

selectedTab

Description	The selected tab component
Attribute	selected-tab
Type	string ｜ undefined
Default	undefined

shape

Description	Set to "soft" for a tab bar with slightly rounded corners, "round" for a tab bar with fully rounded corners, or "rectangular" for a tab bar without rounded corners. Defaults to "round" for the "ionic" theme, undefined for all other themes.
Attribute	shape
Type	"rectangular" ｜ "round" ｜ "soft" ｜ undefined
Default	undefined

theme

Description	The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	theme
Type	"ios" ｜ "md" ｜ "ionic"
Default	undefined

translucent

Description	If true, the tab bar will be translucent. Only applies when the theme is "ios" and the device supports backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

iOS

Name	Description
--background	Background of the tab bar
--border	Border of the tab bar
--color	Color of the tab bar

MD

Name	Description
--background	Background of the tab bar
--border	Border of the tab bar
--color	Color of the tab bar

Slots

No slots available for this component.