Skip to main content

ion-tab-bar

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#

<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>

Properties#

color#

DescriptionThe 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
Defaultundefined

mode#

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" \| "md"
Defaultundefined

selectedTab#

DescriptionThe selected tab component
Attributeselected-tab
Typestring \| undefined
Defaultundefined

translucent#

DescriptionIf true, the tab bar will be translucent.
Only applies when the mode is "ios" and the device supports
backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

CSS Custom Properties#

NameDescription
--backgroundBackground of the tab bar
--borderBorder of the tab bar
--colorColor of the tab bar