Drawer

El Drawer de navegación es un panel lateral con la lista de secciones de un servicio, con grupos que se expanden para mostrar subsecciones. Puede ir fijo en el layout (escritorio) o abrirse como panel temporal sobre el contenido (móvil).

Propiedades y configuraciones

Cuando usarlo

Úsalo en servicios con muchas secciones y jerarquía (portales con sesión, escritorios de funcionarios, bandejas de gestión), donde la persona necesita moverse con frecuencia entre áreas. Si el sitio tiene pocas secciones de primer nivel, usa la navegación del Header / Nav. Para 3 a 7 destinos de acceso rápido sin jerarquía, usa Riel. Para alternar vistas dentro de una misma página, usa Tabs.

Buenas prácticas

Recomendado: Agrupa las secciones como las entiende la ciudadanía

Organiza los grupos por tareas o temas reconocibles (“Mis trámites”, “Certificados”, “Pagos”), no por la estructura interna de la institución.

Recomendado: Marca siempre la sección actual

Indica la página con la opción activa. Si es una subsección, deja su grupo expandido para que se vea el camino completo.

Recomendado: Usa etiquetas cortas y un ícono coherente

Nombra cada opción con una o dos palabras. Si usas íconos, que refuercen el significado y se repitan igual en todo el servicio.

Recomendado: En móvil, ábrelo como panel temporal

Usa la variante móvil sobre el contenido, con el botón de cierre visible arriba, para volver al trámite sin perder el lugar.

Malas prácticas

No recomendado: No anides más de un nivel

Árboles de tres o más niveles hacen difícil saber dónde se está y obligan a expandir demasiado.

No recomendado: No lo uses para acciones de un trámite

El drawer lleva a secciones; “Guardar”, “Enviar solicitud” o “Descargar” son acciones y van en botones dentro del contenido.

No recomendado: No lo satures con todas las opciones abiertas

Expandir todos los grupos genera una lista larga que oculta la estructura. Deja abierto solo el grupo de la sección actual.

No recomendado: No uses etiquetas largas o ambiguas

Frases largas se cortan en varias líneas, y términos como “Otros”, “Varios” o siglas internas no dicen a dónde lleva la opción.

No recomendado: No uses íconos decorativos ni el mismo en todas las opciones

Un ícono repetido no ayuda a distinguir las opciones y solo agrega ruido. Si no tienes un ícono que describa cada destino, usa solo la etiqueta.

Recomendaciones de accesibilidad

Dale un nombre único al bloque de navegación
El drawer es un <nav>; usa un aria-label descriptivo (p. ej. “Navegación de Mi Portal”) para distinguirlo de la navegación del header u otras regiones nav de la página.

Marca la página actual con aria-current="page"
El resaltado visual no basta: el atributo permite que los lectores de pantalla anuncien cuál es la sección en la que se encuentra la persona.

Usa enlaces para navegar y botones para expandir
Las opciones que llevan a una página son <a>; los encabezados de grupo son <button> con aria-expanded. No conviertas un grupo en enlace y botón a la vez.

Da nombre accesible al botón de cierre
El botón __close solo muestra un ícono; incluye aria-label="Cerrar navegación" (o similar) para que se entienda su función.

Gestiona el foco en el panel temporal
Al abrir la variante móvil, lleva el foco al panel y permite cerrarlo con Escape; al cerrarlo, devuelve el foco al botón de menú que lo abrió. Esto lo implementa la aplicación.

Oculta los íconos decorativos
Los íconos leading y el chevron van con aria-hidden="true": la etiqueta de texto ya nombra la opción.