<!-- Generado automáticamente por scripts/generate-docs.mjs. No editar a mano. -->
<!-- Fuente: src/app/componentes/nav/page.tsx -->

# Nav

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

```tsx

```

## 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.

