Tutorial de Ionic tabs: navegación por pestañas (2026)

¿Quieres crear una app con pestañas (tabs) en Ionic y poder navegar entre ellas? La forma más rápida es generar el proyecto con la plantilla tabs (ionic start miApp tabs), que ya trae tres pestañas montadas con componentes standalone de Angular. En este tutorial verás cómo funciona esa estructura paso a paso y cómo añadir una pestaña nueva a tu aplicación, con el código actualizado a Ionic 8.

Actualizado: junio 2026 — revisado con Ionic 8.8 y Angular standalone (la plantilla actual ya no usa NgModules).

Este post forma parte de mi tutorial de Ionic completo. Si te estás iniciando, te recomiendo empezar por la introducción a Ionic y, cuando quieras dar el salto a apps profesionales, mi libro «Desarrollo de aplicaciones móviles multiplataforma con Ionic desde cero», que cubre todo esto en profundidad.

Qué ha cambiado: Ionic 8 y componentes standalone

Si vienes de tutoriales antiguos (Ionic 4/5), lo primero que debes saber es que la plantilla de tabs ha cambiado. Desde que Angular convirtió los standalone components en el estándar, la plantilla tabs de Ionic genera el proyecto sin NgModule: cada página es un componente independiente que declara sus propias dependencias en el array imports, y el enrutado se hace con loadComponent en lugar de loadChildren. El concepto de pestañas es el mismo de siempre; lo que cambia es cómo se declara el código. En este tutorial uso ya el enfoque moderno.

Crear el proyecto con la plantilla tabs

Vamos a generar una aplicación de ejemplo usando la plantilla tabs, que nos crea un proyecto con la estructura ya preparada. Desde la terminal escribimos:

ionic start ejemploTabs tabs

Cuando lo pida, elegimos Angular como framework. La plantilla genera por defecto tres pestañas. Nos situamos dentro de la carpeta del proyecto y lo arrancamos:

cd ejemploTabs
ionic serve

Esto abre la app en el navegador. Para ver cómo quedaría en un móvil, abre las herramientas de desarrollo de Chrome (clic derecho → Inspeccionar) y activa la vista de dispositivo móvil en el panel.

La estructura que genera Ionic

Dentro de src/app encontrarás una carpeta por cada pestaña (tab1, tab2, tab3) y una carpeta tabs que es la página maestra: la que dibuja la barra de pestañas con sus iconos y controla qué contenido se muestra según la pestaña activa.

Las páginas tab1, tab2 y tab3 son páginas normales y corrientes, idénticas a cualquier otra que ya conozcas: simplemente contienen lo que quieras mostrar en cada pestaña. Lo interesante está en la carpeta tabs, que además de los archivos típicos de una página incluye un tabs.routes.ts donde se definen las rutas de cada pestaña.

El HTML de la barra de pestañas (tabs.page.html)

Si abrimos tabs.page.html veremos el marcado que dibuja las pestañas:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" href="/tabs/tab1">
      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2" href="/tabs/tab2">
      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3" href="/tabs/tab3">
      <ion-icon aria-hidden="true" name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Es bastante intuitivo:

ion-tabs es el contenedor general de las pestañas.
ion-tab-bar es la barra donde se muestran los iconos. El atributo slot="bottom" la coloca en la parte inferior; si prefieres la barra arriba, cámbialo por slot="top".
Cada ion-tab-button define una pestaña. El atributo tab indica el nombre que se activará al pulsarla (importante, porque debe coincidir con la ruta), y href apunta a la URL de esa pestaña.
Dentro, un ion-icon (con el atributo name para elegir el icono) y un ion-label con el texto. Si solo quieres el icono sin texto, elimina el ion-label.

El listado completo de iconos disponibles lo tienes en la documentación oficial de Ionicons. Cada icono admite tres estilos: outline, filled y sharp.

El componente maestro (tabs.page.ts)

Aquí está uno de los cambios más visibles respecto a versiones antiguas. Antes el componente se declaraba dentro de un NgModule; ahora es standalone e importa directamente los componentes de Ionic que usa:

import { Component, EnvironmentInjector, inject } from '@angular/core';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { triangle, ellipse, square } from 'ionicons/icons';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss'],
  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
  standalone: true,
})
export class TabsPage {
  public environmentInjector = inject(EnvironmentInjector);

  constructor() {
    addIcons({ triangle, ellipse, square });
  }
}

Fíjate en dos detalles del enfoque standalone: los componentes de Ionic se importan desde @ionic/angular/standalone y los iconos se registran con addIcons(...) en el constructor (en lugar de cargarse de forma global). Es un poco más de código por archivo, pero a cambio cada componente es autónomo y se carga solo lo que se usa.

Las rutas de las pestañas (tabs.routes.ts)

El enrutado vive ahora en tabs.routes.ts y usa loadComponent para cargar de forma diferida (lazy) cada página:

import { Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

export const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadComponent: () =>
          import('../tab1/tab1.page').then((m) => m.Tab1Page),
      },
      {
        path: 'tab2',
        loadComponent: () =>
          import('../tab2/tab2.page').then((m) => m.Tab2Page),
      },
      {
        path: 'tab3',
        loadComponent: () =>
          import('../tab3/tab3.page').then((m) => m.Tab3Page),
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full',
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  },
];

Lo importante: la ruta tabs se asocia al componente TabsPage (la página maestra) y, como children, se define cada pestaña con su path y su loadComponent, que importa el componente de la página a mostrar. Las dos rutas con redirectTo: '/tabs/tab1' hacen que, al entrar en la app, se muestre la primera pestaña por defecto.

Comparado con el viejo tabs.router.module.ts y su loadChildren apuntando a módulos, el resultado es más directo: importas el componente y listo, sin NgModule intermedio.

Cómo añadir una pestaña nueva (tab4) paso a paso

Como el contenido de cada pestaña es una página, para añadir una pestaña nueva creamos una página nueva. Vamos a crear tab4:

ionic g page tab4

Al generarla, Ionic añade automáticamente su ruta en app.routes.ts. En nuestro caso no nos interesa esa ruta suelta, porque tab4 debe colgar de la página maestra tabs y de su propio fichero de rutas. Así que abre app.routes.ts y elimina la línea que se ha generado para tab4, parecida a esta:

// En app.routes.ts: elimina esta ruta autogenerada para tab4
{
  path: 'tab4',
  loadComponent: () => import('./tab4/tab4.page').then((m) => m.Tab4Page),
},

Ahora añadimos la ruta del nuevo tab dentro de los children de tabs.routes.ts, junto a las demás:

{
  path: 'tab4',
  loadComponent: () =>
    import('../tab4/tab4.page').then((m) => m.Tab4Page),
},

Y por último, añadimos el botón de la nueva pestaña en tabs.page.html:

<ion-tab-button tab="tab4" href="/tabs/tab4">
  <ion-icon aria-hidden="true" name="cube"></ion-icon>
  <ion-label>Tab 4</ion-label>
</ion-tab-button>

Recuerda registrar también el icono nuevo (cube) en el addIcons(...) del componente tabs.page.ts e importarlo desde ionicons/icons. Con esto ya tienes tu app funcionando con cuatro pestañas.

Resumen

Crear navegación por tabs en Ionic 8 se reduce a tres piezas: el HTML de la barra (tabs.page.html), el componente standalone que registra los iconos (tabs.page.ts) y el fichero de rutas con loadComponent (tabs.routes.ts). Para añadir pestañas, repites el patrón: nueva página, nueva ruta en los children y nuevo botón en la barra.

Sigue con el tutorial de Ionic

Tutorial de Ionic: menú lateral — otra forma de organizar la navegación de tu app.
Tutorial de Ionic: componentes personalizados — reutiliza UI entre tus pestañas.
Tutorial de Ionic: peticiones HTTP — para llenar tus tabs con datos de una API.

¿Quieres dominar Ionic de verdad?

Si este tutorial te ha sido útil y quieres aprender a desarrollar apps profesionales para iOS y Android con un solo código, todo esto y mucho más lo explico paso a paso en mi libro «Desarrollo de aplicaciones móviles multiplataforma con Ionic desde cero». Es la forma más rápida de pasar de los tutoriales sueltos a construir tu propia app completa.

Eso es todo por hoy. Un saludo, y si aún no lo has hecho, no olvides suscribirte al blog para no perderte los próximos posts. 🙂