Vibedex.io
Back to gallery
navIntermediatefocus

Dropdown Menu

A button that opens a styled dropdown with menu items and dividers.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a dropdown menu with Tailwind using <details>/<summary>: a button that toggles a dropdown panel with menu items. The panel has rounded corners, a subtle border, and shadow. Items have icons on the left, hover backgrounds, and one section divider. Closes on outside click via native <details>.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/dropdown/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-dropdown
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto flex max-w-sm justify-center p-6 w-full">
<div class="relative inline-flex">
      <span
        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
      >
        <button
          type="button"
          class="px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative"
        >
          Product
        </button>

        <button
          type="button"
          class="px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative"
          aria-label="Menu"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </button>
      </span>

      <div
        role="menu"
        class="absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
      >
        <a
          href="#"
          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
          role="menuitem"
        >
          Storefront
        </a>

        <a
          href="#"
          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
          role="menuitem"
        >
          Warehouse
        </a>

        <a
          href="#"
          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
          role="menuitem"
        >
          Stock
        </a>

        <button
          type="button"
          class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
        >
          Delete
        </button>
      </div>
    </div>
  </div>
</div>