Tipo 01
Con etiquetas siempre
Ícono y texto en todos los destinos.
Componentes Navegación inferior
Navegación inferior
La navegación inferior permite pasar entre 3 a 5 secciones principales de una app con un solo toque.
Inicio
Uso
Úsala en celular para las secciones de primer nivel que el usuario visita a menudo: inicio, buscar, perfil.
- 3 a 5 secciones del mismo nivel
- Cambios frecuentes entre secciones
- Una o dos secciones: usa pestañas
- Más de cinco: usa un cajón de navegación
- Acciones como "Enviar": eso no es navegación
Principios
1
Primer nivel
Cada destino es una sección principal.
2
Siempre visible
Se mantiene en todas las pantallas de primer nivel.
3
Consistente
El orden y los íconos no cambian.
Tipos
Tipo 02
Etiqueta solo en el activo
Los inactivos muestran solo el ícono.
Tipo 03
Con insignia
Un punto o número indica novedades.
Anatomía
12345
- Contenedor
- Ícono del destino activo
- Etiqueta del destino activo
- Ícono inactivo
- Etiqueta inactiva
Comportamiento
Inicio
- Tocar un destino muestra su sección de inmediato, sin animaciones largas.
- Tocar el destino activo regresa al inicio de esa sección.
- Al cambiar de sección se conserva lo que el usuario hizo en cada una.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 56 dp |
| Destinos | 3 a 5 |
| Ancho de cada destino | 80 a 168 dp |
| Ícono | 24 dp |
| Etiqueta | 12 sp (14 sp la activa) |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Es navegación
Usa
Etiquetas
Si solo se ve el ícono, el texto debe existir para el lector.
Contraste
Activo e inactivo se distinguen por algo más que el color.