4. Navegación y menús (Navbars)

Construye una barra de navegación semántica, flexible y accesible. Logo a la izquierda, enlaces a la derecha, estado activo y respuesta a pantallas pequeñas.

4. Navegación y menús

Veremos la estructura semántica de una barra de navegación con <header>, <nav> y una lista de enlaces; el layout con Flexbox para distribuir logo y links; el estado activo con .active o aria-current; y un ajuste responsivo rápido con wrap o cambio a columna.

4.1 Barra de navegación básica

Estructura semántica

  • Usa <nav aria-label="principal"> para el bloque de navegación.
  • Lista de enlaces con <ul> <li> <a> para semántica y accesibilidad.
  • Logo/brand como <a> al inicio para volver a inicio.

Navbar con logo a la izquierda, links a la derecha; :hover y foco accesible: 

<header>
  <nav aria-label="principal" class="navbar">
    <a href="/" class="brand">...logo...</a>
    <ul>
      <li><a href="/" aria-current="page" class="active">Inicio</a></li>
      ...
    </ul>
  </nav>
</header>

/* Layout con Flexbox y estado activo */
.navbar { display:flex; justify-content:space-between; align-items:center; }
.navbar a.active, .navbar a[aria-current="page"] { background: var(--primary); }

Responsivo rápido

  • Permite flex-wrap en los links para que “bajen de línea”.
  • En móviles, cambia a columna y haz que los links ocupen todo el ancho para fácil toque.
  • Alternativa: mostrar/ocultar un menú colapsable (fuera del alcance de esta demo rápida).

Micropráctica

Objetivo: convertir una lista vertical en una navbar horizontal con espaciado uniforme.

Antes: lista vertical

Después: navbar horizontal

/* Paso 1: convertir <ul> vertical a fila */
ul { display: flex; gap: 12px; justify-content: space-evenly; flex-wrap: wrap; }

/* Paso 2: estilizar enlaces */
ul a {
  display: inline-block; padding: .6rem .8rem; border-radius: 10px;
  text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.15);
  transition: var(--transition);
}
ul a:hover { background: var(--accent); color: var(--primary); }

Checklist de comprensión