CCHub Logo CCHub Tailwind Collection
Komponenten Dropdown-Menü Dropdown-Menü-Komponente

Dropdown-Menü-Komponente

Eine reaktionsschnelle Dropdown-Menükomponente, die für den geschäftlichen Gebrauch entwickelt wurde und Mikrointeraktionen und Komplementärfarben bietet. Es unterstützt sowohl helle als auch dunkle Themen und verwendet Tailwind CSS für das Styling.

Vorschau

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>

Verwandte Komponenten

Dropdown-Menü "Brutalismus"

Eine Dropdown-Menükomponente im brutalistischen Stil in Graustufen, die sich für Unternehmenswebsites eignet. Verfügt über eine komplexe, mehrteilige Benutzeroberfläche mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Neumorphisches Dropdown-Menü

Neumorphisches Dropdown-Menü für soziale Medien mit leuchtenden Farben und Unterstützung des Dunkelmodus.

Offen

Komponente des 3D-Dropdown-Menüs

Eine reaktionsschnelle Dropdown-Menükomponente mit einem lebendigen Farbschema, die für die Präsentation von Portfolios entwickelt wurde. Es verfügt über ein 3D-Design mit interaktiven Elementen, das für den Dunkelmodus geeignet ist.

Offen