Composants Menu déroulant Composant de menu déroulant

Composant de menu déroulant

Un composant de menu déroulant réactif conçu pour une utilisation professionnelle, avec des micro-interactions et des couleurs complémentaires. Il prend en charge les thèmes clairs et sombres et utilise Tailwind CSS pour le style.

Aperçu

HTML Code

<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 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 dark:focus:ring-indigo-400" aria-haspopup="true" aria-expanded="true" aria-controls="options" id="options-button">
      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 0L10 10.354l3.71-3.144a.75.75 0 111.04 1.083l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.083z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Edit</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Duplicate</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Delete</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Archive</button>
      </form>
    </div>
  </div>
</div>

Composants associés

Neumorphisme Earth Tone Menu déroulant

Un menu déroulant de style Neumorphisme avec des tons de terre, adapté au commerce électronique. Il est réactif et inclut la prise en charge du thème sombre avec Tailwind CSS. Aucun JavaScript n’est utilisé, seulement des classes d’utilitaires HTML et Tailwind pour le style, y compris les variantes en mode sombre.

Ouvrir