ion-tabs

shadow

Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.

The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs.

Both ion-tabs and ion-tab-bar can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.

The ion-tab-bar needs a slot defined in order to be projected to the right place in an ion-tabs component.

Framework Support

Using ion-tabs within Angular, React or Vue requires the use of the ion-router-outlet or ion-nav components.

Usage with Router

Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.

src/app/example.component.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="play-circle"></ion-icon>
      Listen Now
    </ion-tab-button>
    <ion-tab-button tab="radio">
      <ion-icon name="radio"></ion-icon>
      Radio
    </ion-tab-button>
    <ion-tab-button tab="library">
      <ion-icon name="library"></ion-icon>
      Library
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      Search
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

src/app/home/home-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
})
export class HomePageComponent {}

src/app/home/home-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Listen now</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Listen now content</div>
</ion-content>

src/global.css

.example-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

src/app/home/home-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
  declarations: [HomePageComponent],
  exports: [HomePageComponent],
})
export class HomePageModule {}

src/app/library/library-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-library-page',
  templateUrl: './library-page.component.html',
})
export class LibraryPageComponent {}

src/app/library/library-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Library</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Library content</div>
</ion-content>

src/app/library/library-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { LibraryPageComponent } from './library-page.component';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
  declarations: [LibraryPageComponent],
  exports: [LibraryPageComponent],
})
export class LibraryPageModule {}

src/app/radio/radio-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-page',
  templateUrl: './radio-page.component.html',
})
export class RadioPageComponent {}

src/app/radio/radio-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Radio</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Radio content</div>
</ion-content>

src/app/radio/radio-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RadioPageComponent } from './radio-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
  declarations: [RadioPageComponent],
  exports: [RadioPageComponent],
})
export class RadioPageModule {}

src/app/search/search-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-search-page',
  templateUrl: './search-page.component.html',
})
export class SearchPageComponent {}

src/app/search/search-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Search</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Search content</div>
</ion-content>

src/app/search/search-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SearchPageComponent } from './search-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
  declarations: [SearchPageComponent],
  exports: [SearchPageComponent],
})
export class SearchPageModule {}

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { IonicModule } from '@ionic/angular';

import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})],
  declarations: [AppComponent, ExampleComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

src/app/app.component.html

<ion-router-outlet></ion-router-outlet>

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { ExampleComponent } from './example.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: ExampleComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home',
          },
          {
            path: 'home',
            loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
          },
          {
            path: 'radio',
            loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
          },
          {
            path: 'library',
            loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
          },
          {
            path: 'search',
            loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
          },
        ],
      },
    ]),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Best Practices

Ionic has guides on best practices for routing patterns with tabs. Check out the guides for Angular, React, and Vue for additional information.

Interfaces

TabsCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface TabsCustomEvent extends CustomEvent {
  detail: { tab: string };
  target: HTMLIonTabsElement;
}

Properties

No properties available for this component.

Events

Name	Description	Bubbles
ionTabsDidChange	Emitted when the navigation has finished transitioning to a new component.	false
ionTabsWillChange	Emitted when the navigation is about to transition to a new component.	false

Methods

getSelected

Description	Get the currently selected tab.
Signature	getSelected() => Promise<string ｜ undefined>

getTab

Description	Get a specific tab by the value of its tab property or an element reference.
Signature	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select

Description	Select a tab by the value of its tab property or an element reference.
Signature	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

Name	Description
``	Content is placed between the named slots if provided without a slot.
bottom	Content is placed at the bottom of the screen.
top	Content is placed at the top of the screen.