Componentes Menú desplegable Menú desplegable Componente 20

Menú desplegable Componente 20

Un componente de menú desplegable con un estilo de diseño brutalista que utiliza Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.

Vista previa

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-transparent shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-haspopup="true" aria-expanded="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.23 7.21a.75.75 0 011.06-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Profile
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Notifications
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  /* Brutalism styles for dark mode support */
  [class*='bg-'] {
    background-color: #ffffff;
  }
  [class*='text-'] {
    color: #000000;
  }
  .bg-gray-800 {
    background-color: #2d3748;
  }
  .dark .text-gray-300 {
    color: #edf2f7;
  }
  .dark .hover\:bg-gray-700:hover {
    background-color: #4a5568;
  }
</style>

Componentes relacionados

RetroGamingMenú desplegable

Un componente de menú desplegable receptivo, de temática retro/vintage con un esquema de color apagado, adecuado para sitios web de juegos, con soporte para modo oscuro.

Abrir

Componente de menú desplegable

Un componente de menú desplegable responsivo con estilo glassmorphism, adecuado para un blog o consumo de contenido, con soporte para temas oscuros.

Abrir

Componente de menú desplegable

Componente de menú desplegable con microinteracciones, colores vibrantes y diseño simple para un portafolio, con diseño receptivo y soporte de tema oscuro.

Abrir