Tipo 01
Con FAB al centro
El botón flotante se encaja en una muesca de la barra.
Componentes Barra de app inferior
Barra de app inferior
La barra inferior agrupa la navegación y las acciones principales en la parte baja de la pantalla del celular, donde llega el pulgar.
Uso
Úsala en apps de celular con 2 a 5 acciones frecuentes y, opcionalmente, un botón flotante. Acerca las acciones al pulgar en pantallas grandes.
- Apps con una acción principal (FAB) y pocas acciones de apoyo
- Pantallas largas donde la barra superior queda lejos del dedo
- Escritorio: allí la barra va arriba
- Si ya tienes navegación inferior con pestañas: no uses las dos
Principios
1
Alcanzable
Las acciones quedan en la zona cómoda del pulgar.
2
Ordenada
El menú a la izquierda, las acciones a la derecha y el FAB en el centro o al final.
3
Discreta
Se puede esconder al bajar para dar espacio al contenido.
Tipos
Tipo 02
Con FAB al final
El FAB pasa al extremo derecho y las acciones se corren a la izquierda.
Tipo 03
Sin FAB
Solo íconos de acción. Útil en lectores o visores.
Anatomía
12345
- Contenedor de la barra
- Ícono de menú (abre el cajón de navegación)
- Botón flotante (FAB)
- Íconos de acción
- Menú de más opciones
Comportamiento
- Al desplazar hacia abajo la barra puede ocultarse para dar más espacio.
- Al desplazar hacia arriba reaparece de inmediato.
- El FAB permanece visible aunque la barra se oculte, si es la acción principal.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 56 dp |
| Íconos | 24 dp, área táctil 48 dp |
| FAB | 56 dp, encajado en una muesca |
| Margen lateral | 16 dp |
| Elevación | 8 dp |
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
Etiqueta cada ícono
Los botones de solo ícono necesitan aria-label.
Orden lógico
El orden del Tab sigue el orden visual, de izquierda a derecha.
No la escondas al enfocarla
Si alguien navega con teclado, la barra debe quedar visible.