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 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;       
}