Diseñador de navbar

Diseña la barra de navegación de tu sitio (logo, enlaces, botón de acción, colores y estilo) con su versión móvil y menú hamburguesa, y copia el HTML, el CSS y el JavaScript completos.

¿Cómo se construye una navbar?

Una barra de navegación profesional combina tres piezas:

1. HTML semántico: un header con un nav dentro, el logo como enlace a la portada y los enlaces en una lista ul. El atributo aria-current="page" marca la página actual para lectores de pantalla.
2. CSS con Flexbox: display: flex y justify-content: space-between separan el logo de los enlaces. Con position: sticky la barra se queda pegada arriba al hacer scroll.
3. JavaScript mínimo para móvil: en pantallas pequeñas los enlaces se esconden detrás de un botón "hamburguesa" que abre y cierra el menú.

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Posición	Comportamiento
static	Se queda arriba de la página y se va al hacer scroll.
sticky	Fluye normal y se "pega" arriba al hacer scroll. La opción más recomendable.
fixed	Siempre visible, pero no ocupa espacio: hay que dejar un hueco con padding-top en el body.

Generador

Elige un preset, edita los enlaces y ajusta los estilos. Cambia a Móvil debajo de la vista previa para probar el menú hamburguesa.

Diseñador de barra de navegación

Marca

Logo (texto)

Icono NingunoCírculoRomboEmoji

Botón de acción (CTA)

Enlaces

El círculo marca la página actual (clase .activo).

Colores

FondoTextoAcento (hover, activo, CTA)

Estilo y posición

Estilo SólidoSólido con sombraCon borde inferiorVidrio (glass)TransparentePosición sticky (se pega al hacer scroll)fixed (siempre arriba)static (normal)Alineación de enlaces A la derechaCentradosEfecto hover Subrayado animadoFondo suaveSólo color

Medidas

AlturapxAncho máximo del contenidopxCambia a hamburguesa enpx

En móvil, pulsa la hamburguesa para abrir el menú. En escritorio, haz scroll dentro de la vista previa.

<header class="navbar">
  <nav class="navbar__contenedor" aria-label="Principal">
    <a href="#" class="navbar__logo">
      <span class="navbar__icono" aria-hidden="true"></span>
      MiMarca
    </a>

    <button class="navbar__toggle" type="button" aria-expanded="false" aria-controls="menu-principal" aria-label="Abrir menú">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <div class="navbar__menu" id="menu-principal">
      <ul class="navbar__enlaces">
        <li><a href="#" class="activo" aria-current="page">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Nosotros</a></li>
      </ul>
      <a href="#" class="navbar__cta">Contáctanos</a>
    </div>
  </nav>
</header>

Consejos de uso

• Copia las tres partes (HTML, CSS y JS) o directamente el Archivo completo, y ábrelo en el navegador. El script va al final del body (o en un archivo .js con defer).
• El menú móvil es accesible: el botón usa aria-expanded y aria-controls, cambia su aria-label, se cierra con la tecla Escape y al elegir un enlace.
• Mantén pocos enlaces (de 4 a 6). Si tienes más, agrúpalos en submenús o muévelos al footer.
• El botón de acción (CTA) debe destacar con el color de acento: es lo que quieres que el visitante haga (contactar, comprar, registrarse).
• Ajusta el breakpoint según el largo de tus enlaces: si se amontonan antes de cambiar a hamburguesa, súbelo.
• Los estilos transparente y glass lucen sobre una imagen o un degradado en la sección principal (hero). Pruébalos con el generador de glassmorphism.

Buena práctica

Cambia la clase activo y el aria-current="page" al enlace correcto en cada página para que el usuario sepa dónde está.

Error común

Con position: fixed la barra tapa el inicio de tu contenido. El CSS generado agrega padding-top al body con la altura de la barra; si cambias la altura, actualiza ambos valores.