Componente de menú desplegable
Un componente de menú desplegable simple de estilo glassmorphism para comercio electrónico, con un diseño receptivo y soporte para modo oscuro.
Código HTML
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
Options
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
</form>
</div>
</div>
</div>
Componentes relacionados
Menú desplegable del modo oscuro de Cyberpunk
Un componente de menú desplegable complejo de temática cyberpunk para un tablero, con fondos oscuros, colores en escala de grises con sutiles acentos brillantes y capacidad de respuesta completa.
Componente de menú desplegable
Un componente de menú desplegable simple, orgánico/inspirado en la naturaleza con una paleta de colores retro/vintage, adecuado para empresas manufactureras/industriales. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro.
Neumorfismo Tono de tierra Menú desplegable
Un menú desplegable al estilo Neumorphism con tonos tierra, adecuado para el comercio electrónico. Es responsivo e incluye soporte para temas oscuros con Tailwind CSS. No se utiliza JavaScript, solo las clases de utilidad HTML y Tailwind para el estilo, incluidas las variantes del modo oscuro.