Nav

Navegación lateral que organiza destinos persistentes en grupos colapsables. Sirve para moverse entre las secciones principales de una aplicación.

Uso

Cuándo usar

Aplicaciones con varias secciones que el usuario alterna a menudo.
Productos donde los destinos principales se mantienen estables a lo largo de la sesión.
Cuando el usuario necesita saber dónde está y cuántas áreas existen.

Cuándo no usarlo

Pantallas individuales o flujos lineales: una navegación lateral añade ruido.
Productos con árboles profundos donde la jerarquía cambia mucho: prefiere un panel contextual.

Estructura

Grupos y items

Cada grupo tiene un título y un chevron para expandir o colapsar.
Los items se listan en un solo nivel dentro del grupo; evita anidaciones profundas.
El item activo se distingue con un fondo en color de marca y texto en peso fuerte.
Los items no disponibles se muestran con un icono de candado al final.

Accesibilidad

Semántica

Envolver en <nav aria-label="…"> con etiqueta descriptiva.
Disparadores de grupo con aria-expanded.
Item activo con aria-current="page".
Tab y Shift+Tab recorren los items; Enter activa; los grupos colapsados ocultan sus hijos del orden de tabulación.

Contenido

Etiquetas

Una a tres palabras. Sentence case.
Sustantivos concretos en vez de verbos: Tareas, no Ir a tareas.
Mantén consistencia con el resto del producto.