Nav

La navegación principal es la barra horizontal, bajo el header, con las secciones de primer nivel del sitio. Cada opción es un .cl-nav-item, y una opción puede desplegar un Mega menú con enlaces de segundo nivel organizados en columnas tituladas.

Propiedades y configuraciones

Cuando usarlo

Úsala en sitios institucionales y portales de servicios para dar acceso permanente a las 4–7 secciones principales, justo bajo el header. Agrega un Mega menú solo cuando una sección agrupa muchos destinos de segundo nivel que conviene mostrar juntos.

Buenas prácticas

Recomendado: Pocas secciones, con nombres que la ciudadanía reconoce

Limita la barra a las secciones principales y nómbralas con palabras de la persona usuaria, no con la estructura interna de la institución.

Recomendado: Marca la sección cuando la persona está en esa página

Usa el estado actual en la opción cuya página está abierta, para que la persona sepa dónde está. En páginas más profundas (por ejemplo, la ficha de un trámite dentro de Trámites) no hace falta marcarla: el Breadcrumb da el sentido de ubicación.

Recomendado: Agrupa el Mega menú en columnas con títulos claros

Cuando una sección despliega muchos destinos, ordénalos en columnas temáticas con un título descriptivo y pocos enlaces por columna.

Recomendado: Señala los enlaces que salen del sitio

Usa el ícono de enlace externo solo en las opciones que llevan a otro sitio, para que la persona anticipe el cambio de contexto.

Malas prácticas

No recomendado: No sobrecargues la barra con demasiadas opciones

Diez o más secciones obligan a leerlo todo y se desbordan en pantallas medianas. Agrupa o lleva las opciones secundarias a otro lugar.

No recomendado: No uses nombres internos ni siglas

Etiquetas como “UGP”, “DAF” u “OIRS” no dicen qué se va a encontrar. Los nombres de la barra deben describir tareas o contenidos.

No recomendado: No marques más de una opción como actual

Si varias opciones se ven activas a la vez, la barra deja de indicar en qué sección está la persona.

Recomendaciones de accesibilidad

Usa un <nav> con nombre propio
La barra es un <nav class="cl-nav" aria-label="Principal">. Si la página tiene otras navegaciones (breadcrumbs, footer), cada una debe llevar un aria-label distinto.

Marca la página actual con aria-current
La opción de la sección abierta lleva aria-current="page", que además aplica el estilo de activo. No marques el activo solo con una clase visual.

Expón el estado del Mega menú
El item que abre el Mega menú debe ser un <button> con aria-expanded (y aria-controls hacia el panel), sincronizado al abrir y cerrar. Los items que solo navegan son enlaces <a>.

Usa encabezados reales en las columnas
Los títulos de columna son encabezados (<h3 class="cl-mega-menu__title">) y los enlaces van en listas <ul>, para que los lectores de pantalla puedan saltar entre grupos.

Anuncia los enlaces externos
El ícono open-in-new es decorativo (aria-hidden="true"). Si el enlace abre otro sitio o una pestaña nueva, indícalo en el texto accesible (p. ej. “Clave Única, abre sitio externo”).

Permite cerrar el Mega menú con teclado
Escape debe cerrar el panel y devolver el foco al item que lo abrió; el orden de tabulación debe pasar del item a los enlaces del panel sin trampas de foco.

Incluye un enlace para saltar la navegación
Acompaña la barra con el .cl-skip-link del header para que quien navega con teclado no tenga que recorrer todas las opciones en cada página.