Menús desplegables

Los menús desplegables (dropdowns) agrupan opciones relacionadas detrás de un solo botón para que tu barra de navegación no se sature. Aquí tienes cinco variantes listas para copiar: todas funcionan con mouse, pantalla táctil y teclado (Tab, Enter y Esc).

Cómo usar esta página

Cada demo tiene pestañas HTML / CSS / JS con botón Copiar, y un enlace para editarla en el Playground. Los colores están en variables CSS dentro de :root, así que puedes adaptarlos a tu marca en segundos.

Dropdown al hover y al clic

Cuándo usarlo: en cualquier barra de navegación con secciones que tienen subpáginas (Servicios, Recursos, Productos). La variante hover es cómoda en escritorio; la variante clic es más predecible y es la mejor opción si tu público usa mucho el celular.

Dropdown al hover y al clic

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

Cómo personalizarlo

• Cambia --color-primario, --color-barra y --radio en :root para adaptarlo a tu marca.
• Para que un dropdown se abra al pasar el mouse, ponle data-modo="hover"; para que sólo responda al clic, usa data-modo="clic".
• El pseudo-elemento .menu::before funciona como "puente" invisible: evita que el menú se cierre al mover el mouse del botón al panel. No lo quites si usas hover.
• Para alinear el menú a la izquierda del botón en lugar de a la derecha:

.menu { left: 0; right: auto; }

Dropdown multinivel

Cuándo usarlo: catálogos con categorías y subcategorías (tiendas, sitios institucionales). Úsalo con moderación: más de tres niveles cansa al usuario y es difícil de usar en móvil.

Dropdown multinivel

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

Cómo personalizarlo

• --ancho-menu controla el ancho de cada nivel; --color-menu y --color-hover los fondos.
• Para añadir un nivel, mete dentro de un <li> un <button aria-haspopup="true" aria-expanded="false"> seguido de un <ul class="submenu">. El JS lo detecta solo.
• En pantallas menores a 560px los niveles se apilan con sangría en lugar de salir hacia la derecha (ver el @media).
• Si quieres que los niveles 3+ salgan hacia la izquierda (útil cerca del borde derecho):

.submenu .submenu { left: auto; right: 100%; }

Menú de usuario (avatar)

Cuándo usarlo: en paneles de administración, apps SaaS, tiendas con cuenta de cliente o cualquier sitio con inicio de sesión. Agrupa perfil, configuración y "cerrar sesión" en un lugar que todo el mundo reconoce.

Menú de usuario

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

Cómo personalizarlo

• Sustituye las iniciales del .avatar por una foto: <img src="foto.jpg" alt=""> dentro del span y añade object-fit: cover.
• --tam-avatar cambia el tamaño del círculo; elimina .avatar::after si no quieres el indicador verde de "en línea".
• --color-peligro colorea la acción destructiva (cerrar sesión) para diferenciarla.
• En móvil (menos de 420px) se oculta el nombre y queda sólo el avatar.

.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

Menú contextual (clic derecho)

Cuándo usarlo: en aplicaciones web tipo escritorio: gestores de archivos, editores, tableros Kanban o listas donde cada elemento tiene acciones (copiar, renombrar, eliminar). Evítalo en sitios informativos: el usuario espera el menú normal del navegador.

Menú contextual

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

Cómo personalizarlo

• Añade o quita opciones copiando un <li role="none"> con su <button role="menuitem" data-accion="...">. El valor de data-accion llega al manejador de clic.
• Sustituye la línea que escribe en #salida por tu lógica real (por ejemplo, un switch (b.dataset.accion)).
• La función abrir(x, y) corrige la posición para que el menú nunca se salga de la ventana.
• Recuerda: el evento contextmenu también se dispara con Shift + F10 y la tecla Menú, así que el componente es accesible con teclado.

Menú con búsqueda

Cuándo usarlo: documentación, blogs con muchos artículos, tiendas y dashboards. Un buscador visible en la barra con sugerencias instantáneas ahorra clics y es lo primero que usan los usuarios con prisa.

Menú con búsqueda

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

Cómo personalizarlo

• Cambia el arreglo paginas por tus datos reales. Añade una propiedad url y, en elegir(), redirige con location.href = ....
• Para buscar en un servidor, reemplaza el filter por un fetch a tu API (ideal con un pequeño debounce de 200 ms).
• --color-resaltado es el color con el que se marca el texto coincidente dentro de mark.
• El atajo Ctrl/Cmd + K enfoca el buscador desde cualquier parte de la página; es un patrón muy común en sitios modernos.

// Ejemplo: debounce para no llamar a la API en cada tecla
let t;
input.addEventListener('input', () => {
  clearTimeout(t);
  t = setTimeout(buscar, 200);
});

Buena práctica

Un dropdown que sólo se abre con hover no funciona en celulares ni con teclado. Asegúrate siempre de que el botón también responda al clic, que aria-expanded refleje el estado y que Esc cierre el menú devolviendo el foco al botón. Todas las demos de esta página ya lo hacen.