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.

Barra de navegación accesible

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 title="Menú principal">
  <ul class="menu-bar">
    <li><a href="/destino">Inicio</a></li>
    <li><a href="/destino">Servicios</a></li>
    <li><a href="/destino">Nosotros</a></li>
    <li><a href="/destino">Contacto</a></li>
  </ul>
</nav>
Código
.menu-bar {
  background-color: #efefef;
  list-style-type: none;
  margin: 1em 0;
  padding: 0;
}

.menu-bar li {
  display: inline;
}

.menu-bar a {
  color: #333;
  display: inline-block;
  padding: 0.75em;
  text-decoration: none;
}

.menu-bar a:hover,
.menu-bar a:focus {
  background-color: #fafafa;       
}

Barra de navegación adaptable

En los dispositivos móviles, las barras de navegación suelen ser verticales y estar ocultas. Un icono de navegación permite desplegar la barra para navegar por el sitio.

Puedes ver diferentes soluciones de navegación adaptable en el sitio Responsive Navigation.