Tipo 01
Con etiquetas
Ícono y texto en cada destino.
Componentes Riel de navegación
Riel de navegación
El riel es una columna estrecha a un lado de la pantalla con 3 a 7 destinos. Es la navegación ideal para tablets y escritorio.
Uso
Úsalo en pantallas medianas y grandes cuando la navegación inferior queda lejos y un cajón sería demasiado ancho.
- Tablets y escritorio
- 3 a 7 destinos principales
- Celular: allí va la navegación inferior
- Destinos con nombres largos
Principios
1
Compacto
Ocupa poco ancho y deja espacio al contenido.
2
Constante
Siempre visible al lado.
3
Escalable
Puede expandirse a cajón si hacen falta más destinos.
Tipos
Tipo 02
Solo íconos
Más compacto; el texto aparece como tooltip.
Tipo 03
Con FAB
Un botón flotante arriba para la acción principal.
Anatomía
- Contenedor
- FAB (opcional)
- Destino activo con indicador
- Ícono
- Etiqueta
Comportamiento
Inicio
- El indicador del destino activo aparece con una transición suave.
- Al pasar el mouse por un ícono solo, se muestra su nombre.
- En pantallas muy anchas puede expandirse a cajón de navegación.
Medidas
| Medida | Valor de referencia |
|---|---|
| Ancho | 72 dp |
| Alto de cada destino | 56 dp aprox. |
| Ícono | 24 dp |
| Etiqueta | 12 sp |
| Destinos | 3 a 7 |
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
Íconos solos
aria-label o tooltip con el nombre.
Orden vertical
El Tab recorre de arriba abajo.