Saltar al contenido principal

Barra de navegación

La barra de navegación es un patrón de diseño muy común que permite acceder a las secciones importantes de un sitio web.

Una barra de navegación es un componente que contiene enlaces que permiten navegar por el sitio, por lo cual se utiliza el elemento nav. Además, al tratarse de un conjunto de elementos, se agrupan en una lista (ul).

Ejemplo
Código
<nav aria-label="principal">
    <ul class="menu-bar">
        <li><a href="/inicio">Inicio</a></li>
        <li><a href="/servicios" class="current-page">
            <span class="screenreader">Página actual</span>Servicios
        </a></li>
        <li><a href="/nosotros">Nosotros</a></li>
        <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Identifica la página actual para indicar al usuario dónde se encuentra.

En el ejemplo anterior, puedes ver cómo identificamos la página actual utilizando dos técnicas:

  • Visual: Añadiendo estilos que lo distinguen claramente (no utilices únicamente el color).
  • Textual: Añadiendo un texto oculto accesible a los lectores de pantalla.

Botón de menú

En algunas ocasiones, especialmente en dispositivos móviles, ocultamos el menú y colocamos un botón para que el usuario pueda desplegarlo.

En estos casos se suele incluir un icono formado por tres barras horizontales, que se ha convertido en el estándar para representar un menú de navegación.

Ejemplo
Código
<nav class="menu" aria-label="principal">
    <a class="menu-brand" href="#">Logo</a>
    <button class="menu-button">
        <svg viewBox="0 0 30 30">
            <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path>  
        </svg>
    </button>
    <ul class="menu-dropdown">
        <li><a href="/servicios" class="current-page">
          <span class="screenreader">Página actual</span>Servicios
        </a></li>
        <li><a href="/nosotros">Nosotros</a></li>
        <li><a href="/contacto">Contacto</a></li>
    </ul>
</nav>
Código
(function() {
    var button = document.querySelector('.menu-button');
    var menu = document.querySelector('.menu-dropdown');

    button.setAttribute('aria-expanded', 'false');
    menu.hidden = true;

    button.addEventListener('click', function() {
        var expanded = this.getAttribute('aria-expanded') ==='true';
        this.setAttribute('aria-expanded', String(!expanded));
        menu.hidden = expanded;
    });
})();

Mediante el atributo aria-expanded indicamos si el menú está desplegado o no. Y con la ayuda del atributo hidden, ocultamos o mostramos el menú.