Side-navigation

# Side Navigation

El componente side-navigation (Navegación lateral) proporciona una lista estructurada de enlaces jerárquicos. Permite a los usuarios navegar a través de diferentes páginas o secciones dentro de una misma área de una aplicación o portal, con soporte para subniveles expandibles (acordeones de navegación).

Cuándo usar

- Para mostrar la estructura de páginas secundarias dentro de una sección mayor. - En layouts con barra lateral izquierda (sidebar) donde el usuario necesita explorar contenido jerárquico anidado.

Tipos de ítems y estructura

- Ítem simple: Un enlace directo (<a>) hacia otra página. Utiliza la clase .side-navigation__link. - Ítem expandible: Un botón (<button>) que revela subniveles de navegación. También utiliza la clase .side-navigation__link para mantener el mismo estilo visual, pero su función es actuar como *trigger*. - Jerarquía: Los subniveles se estructuran anidando bloques de <ul class="side-navigation__list"> dentro de los <li> correspondientes. El CSS aplica una indentación progresiva (padding-left) de forma automática basándose en la profundidad del anidamiento (hasta 4 niveles de profundidad están soportados por defecto).

Accesibilidad (HTML/CSS)

- La lista completa debe ir envuelta en un contenedor <nav> con un aria-label claro (ej. "Navegación secundaria"). - El estado activo de un enlace (la página donde está el usuario) se marca visualmente con la clase .side-navigation__link--active (borde rojo grueso) y semánticamente con aria-current="page". - Los ítems que expanden submenús deben usar el atributo aria-expanded (true o false) e identificar qué panel controlan mediante aria-controls. - El foco visible está garantizado para el uso de navegación por teclado.

Comportamiento Interactivo (Requiere JavaScript)

La semántica, la jerarquía visual (indentación) y la ocultación/exhibición de los subniveles según aria-expanded ya están resueltos mediante HTML y CSS. Sin embargo, se requiere implementar el siguiente comportamiento con JavaScript:

1. Expansión y colapso de subniveles:

- Al hacer clic en un <button> que sea un *trigger* expandible, se debe alternar su atributo aria-expanded. - El CSS detectará el cambio de aria-expanded="true" a false (o viceversa) y se encargará automáticamente de mostrar u ocultar la lista hija (ul adyacente) y de rotar y colorear el icono del *caret*.

1. Persistencia de estado (Opcional pero recomendado):

- Cuando se recarga la página, el sistema (ya sea backend o JS de frontend) debe inicializar el HTML de forma que el *trigger* ancestro de la página actual (.side-navigation__link--active) tenga aria-expanded="true" por defecto para que la rama relevante permanezca visible.

1. Comportamiento "Acordeón único" (Opcional):

- Dependiendo de la definición de negocio, se puede decidir si al abrir un ítem expandible se deben cerrar los demás ítems del mismo nivel automáticamente.

1. Navegación por teclado avanzada (Opcional):

- Implementar control mediante flechas (Arriba/Abajo para moverse por los ítems visibles, Izquierda/Derecha para abrir/cerrar ramas). Si no se implementa, la navegación natural con el tabulador seguirá siendo accesible y funcional.

<nav class="side-navigation" aria-label="Navegación principal lateral">
  <ul class="side-navigation__list">
    <li class="side-navigation__item">
      <a href="#" class="side-navigation__link side-navigation__link--active" aria-current="page">Inicio</a>
    </li>
    <li class="side-navigation__item">
      <a href="#" class="side-navigation__link">Servicios</a>
    </li>
    <li class="side-navigation__item">
      <button type="button" class="side-navigation__link" aria-expanded="false" aria-controls="sidenav-trámites">
        <span>Trámites</span>
        <span class="side-navigation__icon">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
          </svg>
        </span>
      </button>
      <ul class="side-navigation__list" id="sidenav-trámites">
        <li class="side-navigation__item">
          <a href="#" class="side-navigation__link">Documentación</a>
        </li>
        <li class="side-navigation__item">
          <a href="#" class="side-navigation__link">Certificados</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>