Tipo 01
Estándar
Siempre visible al lado del contenido (escritorio).
Componentes Cajón de navegación
Cajón de navegación
El cajón de navegación es un panel lateral con los destinos de la app. Puede estar siempre visible o abrirse sobre el contenido.
Mis cursos
Uso
Úsalo en apps con 5 o más destinos, o cuando la navegación no cabe en una barra inferior.
- Muchos destinos de primer nivel
- Apps con secciones y subsecciones
- Pocas secciones que se usan seguido: usa navegación inferior
- Acciones: el cajón es solo para navegar
Principios
1
Completo
Muestra todos los destinos en un solo lugar.
2
Agrupado
Destinos relacionados juntos, separados con divisores.
3
Indica dónde estás
El destino actual queda resaltado.
Tipos
Tipo 02
Modal
Se abre sobre el contenido con fondo oscuro (celular).
Tipo 03
Inferior
Sube desde abajo como una hoja, usado con la barra inferior.
Anatomía
123456
- Contenedor del cajón
- Encabezado (opcional)
- Destino activo
- Divisor
- Subtítulo de grupo
- Fondo oscurecido (modal)
Comportamiento
Mis cursos
- El cajón modal entra desde la izquierda y oscurece el contenido.
- Tocar un destino navega y cierra el cajón.
- Tocar el fondo, deslizar a la izquierda o Esc lo cierran.
Medidas
| Medida | Valor de referencia |
|---|---|
| Ancho | 256 dp (máx. ancho de pantalla − 56 dp) |
| Alto de cada destino | 48 dp |
| Radio del destino activo | 4 dp o píldora |
| Elevación (modal) | 16 dp |
| Scrim | negro al 32% |
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
Modal accesible
Foco atrapado mientras está abierto; Esc lo cierra.
Destino actual
aria-current="page".