DIANA

Diseño Aplicaciones Navarra

Side navigation

Navegación lateral con soporte para ítems simples y subniveles expandibles.

Estado: review

1. Niveles y estado activo

Mostrar HTML 
<nav class="gn-side-navigation" aria-label="Navegación lateral por niveles">
  <ul class="gn-side-navigation__list">
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Nivel 1 - normal</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
        <span class="gn-side-navigation__content">Nivel 1 - activo</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Nivel 2 - normal</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
      <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
        <span class="gn-side-navigation__content">Nivel 2 - activo</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-3">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Nivel 3 - normal</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-3">
      <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
        <span class="gn-side-navigation__content">Nivel 3 - activo</span>
      </a>
    </li>
  </ul>
</nav>

2. Navegación real con jerarquía

Mostrar HTML 
<nav class="gn-side-navigation" aria-label="Navegación lateral jerárquica">
  <ul class="gn-side-navigation__list">
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Centro</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <button type="button" class="gn-side-navigation__link" aria-expanded="false" aria-controls="side-sub-1">
        <span class="gn-side-navigation__content">Alumnado</span>
        <svg class="gn-side-navigation__icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
          <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
        </svg>
      </button>
      <ul class="gn-side-navigation__list" id="side-sub-1" hidden>
        <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
          <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
            <span class="gn-side-navigation__content">Matrícula</span>
          </a>
        </li>
        <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
          <button type="button" class="gn-side-navigation__link" aria-expanded="false" aria-controls="side-sub-2">
            <span class="gn-side-navigation__content">Evaluación</span>
            <svg class="gn-side-navigation__icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
              <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
            </svg>
          </button>
          <ul class="gn-side-navigation__list" id="side-sub-2" hidden>
            <li class="gn-side-navigation__item gn-side-navigation__item--level-3">
              <a href="#" class="gn-side-navigation__link">
                <span class="gn-side-navigation__content">Calificaciones</span>
              </a>
            </li>
            <li class="gn-side-navigation__item gn-side-navigation__item--level-3">
              <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
                <span class="gn-side-navigation__content">Informes finales</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Servicios complementarios</span>
      </a>
    </li>
  </ul>
</nav>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initSideNavigation();
});

3. Enlace externo

Mostrar HTML 
<nav class="gn-side-navigation" aria-label="Navegación con enlace externo">
  <ul class="gn-side-navigation__list">
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link">
        <span class="gn-side-navigation__content">Enlace interno</span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
      <a href="#" class="gn-side-navigation__link" target="_blank" rel="noopener">
        <span class="gn-side-navigation__content">Enlace externo<svg class="gn-side-navigation__external-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-label="(se abre en una nueva ventana)" focusable="false">
          <path d="M0 13.4167V0H6.70833V1.4375H1.4375V11.9792H11.9792V6.70833H13.4167V13.4167H0ZM4.85156 9.58333L3.83333 8.5651L10.9609 1.4375H8.625V0H13.4167V4.79167H11.9792V2.45573L4.85156 9.58333Z" fill="currentColor"></path>
        </svg></span>
      </a>
    </li>
    <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
      <a href="#" class="gn-side-navigation__link" target="_blank" rel="noopener">
        <span class="gn-side-navigation__content">Subnivel con enlace externo<svg class="gn-side-navigation__external-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-label="(se abre en una nueva ventana)" focusable="false">
          <path d="M0 13.4167V0H6.70833V1.4375H1.4375V11.9792H11.9792V6.70833H13.4167V13.4167H0ZM4.85156 9.58333L3.83333 8.5651L10.9609 1.4375H8.625V0H13.4167V4.79167H11.9792V2.45573L4.85156 9.58333Z" fill="currentColor"></path>
        </svg></span>
      </a>
    </li>
  </ul>
</nav>

4. Texto largo con salto de línea

Mostrar HTML 
<div style="width: 270px;">
  <nav class="gn-side-navigation" aria-label="Navegación lateral con texto largo">
    <ul class="gn-side-navigation__list">
      <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
        <a href="#" class="gn-side-navigation__link gn-side-navigation__link--active" aria-current="page">
          <span class="gn-side-navigation__content">Texto corto</span>
        </a>
      </li>
      <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
        <a href="#" class="gn-side-navigation__link">
          <span class="gn-side-navigation__content">Texto que excede el ancho disponible y salta a la siguiente línea</span>
        </a>
      </li>
      <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
        <a href="#" class="gn-side-navigation__link">
          <span class="gn-side-navigation__content">Subnivel con etiqueta larga que también necesita saltar de línea</span>
        </a>
      </li>
      <li class="gn-side-navigation__item gn-side-navigation__item--level-1">
        <button type="button" class="gn-side-navigation__link" aria-expanded="true" aria-controls="side-long-sub">
          <span class="gn-side-navigation__content">Sección expandible con título largo que ocupa más de una línea</span>
          <svg class="gn-side-navigation__icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
          </svg>
        </button>
        <ul class="gn-side-navigation__list" id="side-long-sub">
          <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
            <a href="#" class="gn-side-navigation__link">
              <span class="gn-side-navigation__content">Opción normal</span>
            </a>
          </li>
          <li class="gn-side-navigation__item gn-side-navigation__item--level-2">
            <a href="#" class="gn-side-navigation__link">
              <span class="gn-side-navigation__content">Opción con texto largo que también salta de línea en nivel 2</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initSideNavigation();
});