Barras de navegación

La barra de navegación (navbar) es lo primero que ve un visitante: le dice quién eres y a dónde puede ir. Aquí tienes seis variantes listas para copiar. Cada una es un archivo HTML independiente: pulsa Copiar, pégalo en tu proyecto o ábrelo en el Playground para editarlo en vivo.

Todas usan variables CSS en :root, así que para adaptarlas a la marca de tu cliente normalmente basta con cambiar dos o tres colores.

Navbar simple

Cuándo usarlo: en casi cualquier sitio: landing pages, sitios de negocios locales, portafolios. Es la opción más clara: logo a la izquierda, enlaces en el centro y un botón de acción (contacto, comprar, registrarse) a la derecha.

Navbar simple

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia --color-primario para el botón y el enlace activo, y --fondo-nav para el fondo de la barra.
• Ajusta --alto-nav si quieres una barra más alta (72–80px queda más "premium").
• Marca la página actual con aria-current="page" en su enlace: así se resalta y además los lectores de pantalla lo anuncian.
• En móvil los enlaces se ocultan con un @media. Combínalo con el menú hamburguesa para tener una versión móvil.

:root {
  --color-primario: #e11d48; /* rojo de la marca */
  --fondo-nav: #0f172a;      /* barra oscura */
  --texto: #f8fafc;
  --texto-suave: #cbd5e1;
}

Navbar con logo centrado

Cuándo usarlo: marcas donde el logo es protagonista: restaurantes, hoteles, moda, joyerías o estudios de fotografía. Transmite elegancia y simetría.

Navbar con logo centrado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• El truco es grid-template-columns: 1fr auto 1fr: dos columnas flexibles a los lados y el logo en medio, siempre centrado aunque haya distinto número de enlaces.
• Cambia --fuente-logo por la tipografía de la marca (o sustituye el texto por una etiqueta <img> con el logo).
• El subrayado que crece desde el centro se controla en .menu a::after. Cambia height para hacerlo más grueso.
• En móvil el logo pasa arriba con order: -1 y los enlaces quedan debajo.

Navbar transparente que cambia al hacer scroll

Cuándo usarlo: landing pages con una imagen o degradado grande de portada (hero). La barra se funde con la portada y, al bajar, se vuelve sólida para que el texto siga siendo legible sobre el contenido.

Navbar transparente con scroll

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --fondo-solido define el color tras hacer scroll. Usa un color con transparencia (rgb(... / .9)) y backdrop-filter: blur() para un efecto "cristal".
• Cambia el umbral window.scrollY > 40 en el JS para que el cambio ocurra antes o después.
• Si no quieres que la barra se haga más pequeña, pon --alto-nav-compacto igual a --alto-nav.
• Asegúrate de que el texto blanco tenga buen contraste sobre tu imagen de portada. Si la imagen es clara, añade una capa oscura encima.

Navbar sticky que se oculta al bajar

Cuándo usarlo: blogs, periódicos digitales y artículos largos, sobre todo en móvil. Deja más espacio para leer al bajar y vuelve a aparecer en cuanto el usuario sube un poco (cuando probablemente quiere navegar).

Navbar que se oculta al bajar

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --duracion controla la velocidad de la animación.
• UMBRAL en el JS evita que la barra "tiemble" con movimientos pequeños del dedo. Súbelo a 15–20 si la notas nerviosa.
• Usa transform: translateY(-100%) (no top): se anima más fluido porque no obliga al navegador a recalcular el diseño.
• El evento focusin muestra la barra si alguien navega con el teclado. No lo quites: es accesibilidad básica.

Menú con indicador deslizante

Cuándo usarlo: portafolios, apps y sitios modernos donde quieres un toque de animación. El subrayado se desliza hasta el enlace bajo el cursor y vuelve al activo cuando sales.

Indicador deslizante

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --color-primario cambia el color del indicador y su brillo (box-shadow). Quita la sombra si prefieres un estilo plano.
• --grosor controla el alto de la línea. Para convertirlo en un fondo que se desliza, pon top: 4px; bottom: 4px; height: auto; y un border-radius mayor.
• La curva cubic-bezier(.65, 0, .35, 1) da el efecto "elástico suave". Prueba ease-out para algo más simple.

/* Variante: el indicador es un fondo completo detrás del texto */
.indicador { top: 6px; bottom: 6px; height: auto; border-radius: 10px; opacity: .25; box-shadow: none; }

Menú tipo píldora

Cuándo usarlo: filtros de categorías, navegación secundaria dentro de una página, paneles de apps o selección entre vistas ("Día / Semana / Mes"). Es muy táctil y se entiende al instante.

Menú tipo píldora

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --radio: 999px es lo que da la forma de píldora. Bájalo a 10px para botones redondeados en vez de cápsulas.
• La clase .borde crea una variante con contorno. Úsala para filtros secundarios.
• Puedes quitar los emojis o reemplazarlos por iconos SVG.
• Si las opciones filtran contenido en la misma página (no navegan), considera usar el patrón de tabs con role="tablist".

Buena práctica

Una barra de navegación debería tener 5–7 enlaces como máximo. Si tu cliente quiere más, agrupa con un desplegable o un mega menú. Y siempre envuelve los enlaces en un <nav aria-label="...">: los lectores de pantalla permiten saltar directamente a él.