Cerca componenti

Categorie

Componenti Menu a discesa

Menu a discesa

Sottomenu che appaiono quando si fa clic o si passa il mouse

Menu a discesa Glassmorphism

Un menu a tendina semplice e reattivo con un design a morfismo in vetro, che utilizza toni viola/viola, adatto per applicazioni tecnologiche/SaaS. Supporta la modalità oscura.

Aperto Anteprima

                <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-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600" 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>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">
        License
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Un menu a discesa pulito e minimalista per i siti Web di eventi e conferenze, caratterizzato da una tavolozza di colori verde foresta e un design reattivo con supporto per la modalità scura, ispirato alla tipografia svizzera/internazionale.

Aperto Anteprima

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Event Sessions
      <!-- Heroicon name: solid/chevron-down -->
      <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>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <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 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
    </div>
  </div>
</div>

Menu a discesa di lusso per la finanza

Un componente del menu a discesa elegante e reattivo progettato per le interfacce finanziarie e bancarie, caratterizzato da una combinazione di colori in bianco e nero con un accento sottile, supporto per la modalità oscura e tipografia sofisticata. Compatibile con desktop, tablet e visualizzazioni mobili.

Aperto Anteprima

                <div class="relative inline-block text-left font-serif">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 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-offset-gray-900 dark:focus:ring-indigo-600 transition duration-150 ease-in-out" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Accounts & Services
      <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>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <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 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-credit-card mr-2 text-gray-500 dark:text-gray-400"></i> Checking Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-piggy-bank mr-2 text-gray-500 dark:text-gray-400"></i> Savings Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-hand-holding-usd mr-2 text-gray-500 dark:text-gray-400"></i> Loans & Credit
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-chart-line mr-2 text-gray-500 dark:text-gray-400"></i> Investments
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-wallet mr-2 text-gray-500 dark:text-gray-400"></i> Online Banking
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-headset mr-2 text-gray-500 dark:text-gray-400"></i> Customer Support
      </a>
    </div>
  </div>
</div>

<!-- To make the dropdown interactive, you would typically use a small amount of JavaScript.
     For example, a simple toggle on button click to add/remove 'hidden' class from the dropdown panel.
     Since the prompt strictly forbids JavaScript, this example shows the structure 
     and styling for both states (button and dropdown content) as per Tailwind CSS usage. -->

<!-- To simulate interactivity for demonstration, you can manually remove 'hidden' class from the dropdown panel div.
     Example: <div class="origin-top-right absolute right-0 [...] z-10" role="menu" ...> -->

Componente del menu a discesa

Un semplice menu a discesa in stile industriale per siti Web di notizie/giornalismo, con una tavolozza di colori foresta/verde e supporto per la modalità scura. Progettato per essere reattivo su tutti i dispositivi.

Aperto Anteprima

                <div class="relative flex justify-center items-center font-sans dark:bg-gray-900 bg-gray-100 p-4">
  <div class="group relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center items-center w-full rounded-md border border-gray-400 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 dark:focus:ring-emerald-600 transition-all duration-300" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Sections
        <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>

    <!--
      Dropdown menu, show/hide based on menu state.

      Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
      Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div class="opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 duration-200 ease-out 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 transition-all" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">Latest News</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">Politics</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">Business</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">Technology</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">Opinion</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">Sports</a>
      </div>
    </div>
  </div>
</div>

3D_Marketplace_Dropdown_Menu

Un complesso componente del menu a discesa ispirato al 3D progettato per le piattaforme di marketplace, caratterizzato da colori neutri caldi, navigazione multilivello e reattività completa con supporto della modalità oscura. Incorpora profondità e coinvolgimento attraverso ombre e transizioni sottili.

Aperto Anteprima

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-amber-500 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg active:scale-95" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <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>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-200"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-150"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="absolute right-0 mt-2 w-72 md:w-96 origin-top-right bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-100 opacity-100 transition-all duration-300 ease-in-out z-50" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/30/30?random=1" alt="Electronics icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Electronics
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/30/30?random=2" alt="Fashion icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Fashion & Apparel
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/30/30?random=3" alt="Home & Garden icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Home & Garden
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/30/30?random=4" alt="Books icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Books & Media
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/30/30?random=5" alt="Sports icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Sports & Outdoors
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">
        <img src="https://picsum.photos/30/30?random=6" alt="Vehicles icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Vehicles
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-6">All Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-7">Sell on Marketplace</a>
    </div>
  </div>
</div>

RetroGamingMenu a discesa

Un componente del menu a discesa reattivo, a tema retrò/vintage con una combinazione di colori tenui, adatto per siti Web di giochi, con supporto per la modalità oscura.

Aperto Anteprima

                <div class="relative inline-block text-left font-mono">
  <button id="retroDropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-400 bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-400 transform transition-all duration-150 ease-in-out active:translate-y-1" aria-expanded="false" aria-haspopup="true">
    Game Actions
    <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 id="retroDropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none border-t-2 border-l-2 border-r-4 border-b-4 border-gray-500 dark:bg-gray-800 dark:border-gray-600 hidden opacity-0 scale-95 transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="retroDropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">
        <span class="pr-2 text-yellow-600 dark:text-yellow-400">▶</span> New Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-1">
        <span class="pr-2 text-red-600 dark:text-red-400">■</span> Load Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-2">
        <span class="pr-2 text-green-600 dark:text-green-400">●</span> Save Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-3">
        <span class="pr-2 text-blue-600 dark:text-blue-400">◆</span> Options
      </a>
    </div>
  </div>
</div>

<script>
  // Basic JavaScript for demonstration, not part of the HTML/Tailwind solution itself.
  // In a real application, you'd use a JS framework or a dedicated script.
  const dropdownButton = document.getElementById('retroDropdownButton');
  const dropdownMenu = document.getElementById('retroDropdownMenu');

  dropdownButton.addEventListener('click', () => {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    dropdownButton.setAttribute('aria-expanded', !isExpanded);
    if (!isExpanded) {
      dropdownMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
      dropdownMenu.classList.add('block', 'opacity-100', 'scale-100');
      dropdownMenu.focus();
    } else {
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
    }
  });

  // Close the dropdown if clicking outside
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      if (!dropdownMenu.classList.contains('hidden')) {
        dropdownButton.setAttribute('aria-expanded', 'false');
        dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
        dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      }
    }
  });

  // Close on Escape key
  dropdownMenu.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      dropdownButton.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      dropdownButton.focus();
    }
  });
</script>

Componente del menu a discesa

Un semplice componente di menu a discesa monocromatico progettato per le interfacce finanziarie/bancarie, caratterizzato da microinterazioni sottili e reattività completa con supporto della modalità scura.

Aperto Anteprima

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="transition-all duration-300 ease-in-out inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 dark:focus:ring-purple-600 active:scale-98" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Account Actions
      <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>

  <!-- Dropdown menu, show/hide based on menu state. Using inline style here to simulate dynamic show/hide. In a real app, this would be toggled with JS. -->
  <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 focus:outline-none origin-top-right transition-all duration-300 ease-out transform scale-95 opacity-0 invisible sm:scale-100 sm:opacity-100 sm:visible" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.794 3.391A60.07 60.07 0 0022.5 12c0-8.284-6.716-15-15-15S0 3.716 0 12c0 3.037.915 5.86 2.593 8.163" />
        </svg>
        View Balance
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transaction History
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transfer Funds
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="transition-colors duration-200 block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
          <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3-9l-3 3m0 0l3 3m-3-3H21" />
          </svg>
          Log Out Account
        </button>
      </form>
    </div>
  </div>
</div>

Componente del menu a discesa

Un componente del menu a discesa complesso e reattivo progettato per la documentazione o i siti wiki, caratterizzato da uno stile tipografico svizzero/internazionale pulito e minimalista con una combinazione di colori Oceano/Blu. Include il supporto per la modalità oscura e più elementi interattivi.

Aperto Anteprima

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8">

  <!-- Dropdown Container -->
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-offset-gray-900" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Documentation Sections
        <!-- Heroicon name: solid/chevron-down -->
        <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>

    <!-- Dropdown menu, show/hide based on menu state. -->
    <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 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-0">Getting Started</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-1">Core Concepts</a>
      </div>
      <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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-2">Advanced Guides</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-3">API Reference</a>
      </div>
      <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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-4">Tutorials</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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-5">Support &amp; FAQ</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Example of another dropdown or related element - for complexity -->
  <div class="relative inline-block text-left ml-4">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-500 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-offset-gray-900" id="menu-button-2" aria-expanded="true" aria-haspopup="true">
        Version
        <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-44 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button-2" 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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v2.0 (Latest)</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.5</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.0 (Archive)</a>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (example concept - would typically be part of a larger nav) -->
  <div class="sm:hidden mt-8">
    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <!-- Icon when menu is closed. Heroicon name: outline/menu -->
      <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
      <!-- Icon when menu is open. Heroicon name: outline/x -->
      <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <div class="space-y-1 px-2 pt-2 pb-3 hidden" id="mobile-menu">
      <a href="#" class="bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Getting Started</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Core Concepts</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Advanced Guides</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">API Reference</a>
    </div>
  </div>

</div>

Componente del menu a discesa

Un componente del menu a discesa reattivo per le interfacce finanziarie/bancarie, con microinterazioni, colori gioiello e supporto per la modalità scura. Progettato per il coinvolgimento e la chiarezza dell'utente.

Aperto Anteprima

                <div class="relative inline-block text-left font-sans">
  <button id="dropdown-button" type="button" class="inline-flex justify-center items-center gap-2 w-full rounded-md border border-emerald-600 bg-emerald-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-100 focus:ring-emerald-500 dark:border-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:text-gray-100 dark:focus:ring-offset-emerald-900 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105" aria-expanded="true" aria-haspopup="true">
    <svg class="-ml-1 mr-2 h-5 w-5 text-current" 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.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
    </svg>
    <span>Account Options</span>
  </button>

  <div id="dropdown-menu" class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 transition-all duration-300 ease-out scale-95 opacity-0 invisible" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5a.75.75 0 00.75.75h4.5a.75.75 0 000-1.5h-3.75V4.75z" />
            <path fill-rule="evenodd" d="M.93 2.822A.75.75 0 011.875 2.25h16.25a.75.75 0 01.945.572L19.45 4.75H.55L.93 2.822zM19.5 6.25l-.273 1.455A49.123 49.123 0 0110 16.75 49.123 49.123 0 01.773 7.705L.5 6.25h19z" clip-rule="evenodd" />
          </svg>
          <span>View Balance</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M.5 9.5a.75.75 0 01.75-.75h1.612l1.64-1.612a.75.75 0 011.14-.093l1.84 2.301 3.09-3.09a.75.75 0 011.06 0l2.031 2.032c.571-1.042.868-2.146.992-3.184A.75.75 0 0118.75 4l.25 10A.75.75 0 0118.28 15.118l-1.442-.361a49.117 49.117 0 01-14.774.225l-1.444.364A.75.75 0 01.5 14.5l.25-10a.75.75 0 01.272-.5zM16.48 9.07c-1.42.062-2.812.22-4.177.472-1.393.255-2.756.55-4.089.882l-2.032-2.032 2.502-3.128c.378-.472.935-.839 1.57-.935l1.896-.284c.8-.119 1.603-.178 2.408-.178.692 0 1.38-.027 2.063-.079l2.457-1.365a.75.75 0 01.407.697v1.895l.135 1.583z" clip-rule="evenodd" />
          </svg>
          <span>Transfer Funds</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v2.5a.75.75 0 001.5 0v-2.5A3.75 3.75 0 0015.75 0H4.25A3.75 3.75 0 00.5 4.25v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M.5 10.75a.75.75 0 01.75-.75h17a.75.75 0 010 1.5h-17a.75.75 0 01-.75-.75zM1.25 13.5a.75.75 0 01.75-.75h16a.75.75 0 010 1.5H2a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M7.75 16.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM2.5 7.5a.75.75 0 000 1.5h15a.75.75 0 000-1.5H2.5z" clip-rule="evenodd" />
          </svg>
          <span>Transaction History</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.5 5h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM10.5 8h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM3 12a2 2 0 104 0 2 2 0 00-4 0z" />
            <path fill-rule="evenodd" d="M2.25 5.5A2.75 2.75 0 015 2.75h10A2.75 2.75 0 0117.75 5.5v9.5a2.75 2.75 0 01-2.75 2.75H5A2.75 2.75 0 012.25 15V5.5zm3.5-.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-4z" clip-rule="evenodd" />
            <path d="M10.5 11h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zm.75 2.25a.75.75 0 00-1.5 0v1a.75.75 0 001.5 0v-1z" />
          </svg>
          <span>Manage Cards</span>
        </div>
      </a>
    </div>
  </div>
</div>

<script>
  const dropdownButton = document.getElementById('dropdown-button');
  const dropdownMenu = document.getElementById('dropdown-menu');

  function toggleDropdown() {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    if (isExpanded) {
      dropdownMenu.classList.add('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.remove('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'false');
    } else {
      dropdownMenu.classList.remove('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.add('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'true');
    }
  }

  dropdownButton.addEventListener('click', toggleDropdown);

  // Close the dropdown if the user clicks outside of it
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });

  // Close dropdown on escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });
</script>

Componente del menu a discesa

Un semplice menu a discesa ispirato alla natura con una tavolozza di colori retrò/vintage, adatto ad aziende manifatturiere/industriali. È dotato di un design reattivo e del supporto per la modalità oscura.

Aperto Anteprima

                <div class="relative inline-block text-left font-serif">
  <button id="dropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-stone-100 text-sm font-medium text-amber-900 hover:bg-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-amber-500 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900 dark:focus:ring-amber-400 opacity-90 transition-all duration-300 ease-in-out transform hover:scale-105">
    <svg class="-ml-1 mr-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>
    <span>Menu Options</span>
    <svg class="-mr-1 ml-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-stone-50 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none dark:bg-gray-700 dark:divide-gray-600 opacity-0 scale-95 pointer-events-none transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-0">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM13 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM13 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z" />
        </svg>
        Production Overview
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-1">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M6.267 19.510A2.898 2.898 0 0010 18c.95 0 1.85-.357 2.584-.96a1.597 1.597 0 011.758 0C13.565 17.59 14 17 14 17H6s-1.57-.406-2.584-1.96c-.734-.603-1.634-.96-2.584-.96H0zM14 6a2 2 0 00-2-2H8a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V6z" clip-rule="evenodd" />
        </svg>
        Quality Control
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-2">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 7a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Supply Chain
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-3">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-2 2a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
        Maintenance Log
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-4">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 18V6zm4 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Reports
      </a>
    </div>
  </div>
</div>

<script>
  // This script is for demonstration purposes to toggle the dropdown.
  // In a real application, you would use a JavaScript framework or library.
  document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    dropdownButton.addEventListener('click', function() {
      const isExpanded = dropdownMenu.classList.contains('scale-100');
      if (isExpanded) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      } else {
        dropdownMenu.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
        dropdownMenu.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
      }
    });

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      }
    });
  });
</script>