Menu / Dropdown

Dropdown menus for actions, navigation, and context menus. Uses native <details> for zero-JS dropdowns.

Dropdown (No JavaScript)

Preview

<!-- Uses native <details> — no JS needed! -->
<details class="dropdown">
  <summary class="btn">
    Options
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </summary>
  <div class="dropdown-menu">
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg></span>
      <span class="dropdown-item-text">Edit</span>
      <span class="dropdown-item-shortcut">⌘E</span>
    </button>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/></svg></span>
      <span class="dropdown-item-text">Duplicate</span>
      <span class="dropdown-item-shortcut">⌘D</span>
    </button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item dropdown-item-danger">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg></span>
      <span class="dropdown-item-text">Delete</span>
      <span class="dropdown-item-shortcut">⌘⌫</span>
    </button>
  </div>
</details>

Requires: ux.min.css

<!-- Native <details> provides toggle without JS -->
<details class="relative inline-block">
  <summary class="btn list-none cursor-pointer" style="list-style: none;">
    Options
    <svg class="size-4 opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </summary>
  <div class="absolute z-100 mt-1 min-w-[180px] p-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
    <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-sm cursor-pointer bg-transparent hover:bg-base-200">Edit</button>
    <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-sm cursor-pointer bg-transparent hover:bg-base-200">Duplicate</button>
    <div class="h-px my-1 bg-base-300"></div>
    <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-sm cursor-pointer bg-transparent text-error hover:bg-error/10">Delete</button>
  </div>
</details>

Requires: tw.min.css

// Zero JavaScript needed! Uses native <details>.
// Optional: close on click outside:
document.addEventListener('click', (e) => {
  document.querySelectorAll('details.dropdown[open]').forEach(d => {
    if (!d.contains(e.target)) d.open = false;
  });
});

Menu Panel (standalone)

Preview

<div class="menu">
  <div class="menu-header">File</div>
  <button class="menu-item">
    <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
    <span class="menu-label">Edit</span>
    <span class="menu-shortcut">⌘E</span>
  </button>
  <button class="menu-item">
    <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>
    <span class="menu-label">Duplicate</span>
    <span class="menu-shortcut">⌘D</span>
  </button>
  <button class="menu-item menu-item-active">
    <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
    <span class="menu-label">Preview</span>
  </button>
  <div class="menu-divider"></div>
  <button class="menu-item menu-item-danger">
    <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
    <span class="menu-label">Delete</span>
    <span class="menu-shortcut">⌫</span>
  </button>
</div>

Requires: ux.min.css

<div class="min-w-48 rounded-box p-1 bg-base-100 border border-base-300 shadow-lg">
  <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-base-content/50">File</div>
  <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-sm cursor-pointer bg-transparent hover:bg-base-200">
    <svg class="size-5 shrink-0 opacity-60" ...></svg>
    <span class="flex-1 truncate">Edit</span>
    <span class="text-xs text-base-content/40 ml-auto pl-4">⌘E</span>
  </button>
  <!-- ... more items ... -->
</div>

Requires: tw.min.css

// No JavaScript required — .menu is a standalone panel component

Groups & Selection

Preview

<details class="dropdown">
  <summary class="btn">
    Account
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </summary>
  <div class="dropdown-menu">
    <div class="dropdown-group">
      <div class="dropdown-header">Profile</div>
      <button class="dropdown-item">
        <span class="dropdown-item-text">Settings</span>
      </button>
      <button class="dropdown-item">
        <span class="dropdown-item-text">Billing</span>
        <span class="dropdown-item-badge">Pro</span>
      </button>
    </div>
    <div class="dropdown-group">
      <div class="dropdown-header">Team</div>
      <button class="dropdown-item dropdown-item-selected">
        <span class="dropdown-item-text">My Workspace</span>
        <span class="dropdown-item-check"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></span>
      </button>
      <button class="dropdown-item">
        <span class="dropdown-item-text">Shared Workspace</span>
      </button>
    </div>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item dropdown-item-danger">
      <span class="dropdown-item-text">Sign Out</span>
    </button>
  </div>
</details>

Requires: ux.min.css

<details class="relative inline-block">
  <summary class="btn list-none cursor-pointer" style="list-style: none;">
    Account
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </summary>
  <div class="absolute z-100 mt-1 min-w-50 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
    <div class="py-1">
      <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-base-content/40">Profile</div>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">
        <span class="flex-1 truncate">Settings</span>
      </button>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">
        <span class="flex-1 truncate">Billing</span>
        <span class="text-xs ml-auto rounded-full text-white bg-primary px-1.5 py-0.5">Pro</span>
      </button>
    </div>
    <div class="py-1 border-t border-base-300">
      <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-base-content/40">Team</div>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none font-medium text-primary hover:bg-base-200">
        <span class="flex-1 truncate">My Workspace</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
      </button>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">
        <span class="flex-1 truncate">Shared Workspace</span>
      </button>
    </div>
    <div class="h-px my-1 bg-base-300"></div>
    <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none text-error hover:bg-error/10">
      <span class="flex-1 truncate">Sign Out</span>
    </button>
  </div>
</details>

Requires: tw.min.css

// No JavaScript required for open/close — native <details>.
// Toggle selection with JS if needed:
// item.classList.toggle('dropdown-item-selected');

Position Variants

Preview

<div class="flex gap-4 items-start flex-wrap">
  <!-- Default (left-aligned, opens down) -->
  <details class="dropdown">
    <summary class="btn">Default ↓</summary>
    <div class="dropdown-menu">
      <button class="dropdown-item"><span class="dropdown-item-text">Option A</span></button>
      <button class="dropdown-item"><span class="dropdown-item-text">Option B</span></button>
    </div>
  </details>

  <!-- Right-aligned -->
  <details class="dropdown">
    <summary class="btn">Right ↓</summary>
    <div class="dropdown-menu dropdown-menu-right">
      <button class="dropdown-item"><span class="dropdown-item-text">Option A</span></button>
      <button class="dropdown-item"><span class="dropdown-item-text">Option B</span></button>
    </div>
  </details>
</div>

Requires: ux.min.css

<div class="flex gap-4 items-start flex-wrap">
  <!-- Default (left-aligned, opens down) -->
  <details class="relative inline-block">
    <summary class="btn list-none cursor-pointer" style="list-style: none;">Default ↓</summary>
    <div class="absolute z-100 mt-1 left-0 min-w-44 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Option A</button>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Option B</button>
    </div>
  </details>

  <!-- Right-aligned -->
  <details class="relative inline-block">
    <summary class="btn list-none cursor-pointer" style="list-style: none;">Right ↓</summary>
    <div class="absolute z-100 mt-1 right-0 min-w-44 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Option A</button>
      <button class="flex items-center gap-2 w-full rounded-field px-3 py-2 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Option B</button>
    </div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required — position is CSS only

Action Menu (Responsive — Bottom Sheet on Mobile)

Preview

↕ Resize your browser below 768px to see the action sheet transform.

<!-- On desktop: dropdown. On mobile (<768px): bottom action sheet -->
<!-- Add dropdown-mobile-full for the responsive behavior -->
<details class="dropdown dropdown-mobile-full">
  <summary class="btn color-ghost" aria-label="Options">
    <!-- Meatball (horizontal dots) icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>
    </svg>
  </summary>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-wide">
    <div class="dropdown-header">Actions</div>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.466.73-3.558"/></svg></span>
      <span class="dropdown-item-text">Open Web</span>
    </button>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5Z"/></svg></span>
      <span class="dropdown-item-text">Show QR Code</span>
    </button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg></span>
      <span class="dropdown-item-text">Settings</span>
    </button>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg></span>
      <span class="dropdown-item-text">Users</span>
    </button>
    <button class="dropdown-item">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z"/></svg></span>
      <span class="dropdown-item-text">Modules</span>
    </button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item dropdown-item-danger">
      <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg></span>
      <span class="dropdown-item-text">Delete Hub</span>
    </button>
  </div>
</details>

<p class="text-sm text-base-content/50 mt-4">↕ Resize your browser below 768px to see the action sheet transform.</p>

Requires: ux.min.css

<!-- dropdown-mobile-full converts to bottom sheet on mobile -->
<details class="relative inline-block [&[open]_.dropdown-panel]{opacity-100;visible;scale-100;translate-y-0}">
  <summary class="btn list-none cursor-pointer" style="list-style: none;" aria-label="Options">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>
    </svg>
  </summary>
  <div class="dropdown-panel absolute z-100 right-0 mt-1 min-w-60 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg opacity-0 invisible scale-95 -translate-y-2 transition-all">
    <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-base-content/40">Actions</div>
    <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">
      <svg class="size-5 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.466.73-3.558"/></svg>
      <span class="flex-1 truncate">Open Web</span>
    </button>
    <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">
      <svg class="size-5 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5Z"/></svg>
      <span class="flex-1 truncate">Show QR Code</span>
    </button>
    <div class="h-px my-1 bg-base-300"></div>
    <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none text-error hover:bg-error/10">
      <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
      <span class="flex-1 truncate">Delete Hub</span>
    </button>
  </div>
</details>

Requires: tw.min.css

// Close on click outside (optional enhancement)
document.addEventListener('click', (e) => {
  document.querySelectorAll('details.dropdown[open]').forEach(d => {
    if (!d.contains(e.target)) d.open = false;
  });
});

// Close on backdrop tap (mobile bottom sheet)
document.querySelectorAll('.dropdown-mobile-full').forEach(dd => {
  dd.addEventListener('click', (e) => {
    // If clicking the ::before backdrop area (the dropdown itself, not its children)
    if (e.target === dd && dd.open) {
      dd.open = false;
    }
  });
});

Action Menu — Kebab Trigger (Vertical Dots)

Preview

Production Hub

hub-production.erplora.com

<!-- Kebab (vertical dots) variant — common in card headers -->
<div class="flex items-center gap-4">
  <!-- Inside a card header -->
  <div class="card" style="max-width:400px; width:100%">
    <div class="card-body">
      <div class="flex items-center justify-between">
        <h3 class="font-semibold">Production Hub</h3>
        <details class="dropdown dropdown-mobile-full">
          <summary class="btn btn-sm color-ghost" aria-label="Hub options" style="padding: 0.25rem;">
            <!-- Kebab (vertical dots) icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/>
            </svg>
          </summary>
          <div class="dropdown-menu dropdown-menu-right">
            <button class="dropdown-item">
              <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3"/></svg></span>
              <span class="dropdown-item-text">Open Web</span>
            </button>
            <button class="dropdown-item">
              <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg></span>
              <span class="dropdown-item-text">Settings</span>
            </button>
            <button class="dropdown-item">
              <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg></span>
              <span class="dropdown-item-text">Users</span>
            </button>
            <div class="dropdown-divider"></div>
            <button class="dropdown-item dropdown-item-danger">
              <span class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg></span>
              <span class="dropdown-item-text">Delete Hub</span>
            </button>
          </div>
        </details>
      </div>
      <p class="text-sm text-base-content/60 mt-1">hub-production.erplora.com</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Kebab icon trigger inside a card — Tailwind only -->
<div class="bg-base-100 border border-base-300 rounded-box p-4" style="max-width:400px;">
  <div class="flex items-center justify-between">
    <h3 class="font-semibold">Production Hub</h3>
    <details class="relative inline-block">
      <summary class="btn btn-sm list-none cursor-pointer p-1" style="list-style:none;" aria-label="Options">
        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/>
        </svg>
      </summary>
      <div class="absolute z-100 right-0 mt-1 min-w-48 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
        <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Open Web</button>
        <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Settings</button>
        <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none hover:bg-base-200">Users</button>
        <div class="h-px my-1 bg-base-300"></div>
        <button class="flex items-center gap-2 w-full rounded-field px-3 min-h-11 text-[0.9375rem] cursor-pointer bg-transparent border-none text-error hover:bg-error/10">Delete Hub</button>
      </div>
    </details>
  </div>
  <p class="text-sm text-base-content/60 mt-1">hub-production.erplora.com</p>
</div>

Requires: tw.min.css

// Close on click outside
document.addEventListener('click', (e) => {
  document.querySelectorAll('details.dropdown[open]').forEach(d => {
    if (!d.contains(e.target)) d.open = false;
  });
});

Classes Reference

Class	Description
Menu (standalone panel)
.menu	Standalone menu panel
.menu-item	Clickable menu item
.menu-item-active	Selected/active item
.menu-item-disabled	Disabled item
.menu-item-danger	Destructive action (red)
.menu-icon	Icon inside item
.menu-label	Item text label
.menu-shortcut	Keyboard shortcut text
.menu-divider	Horizontal separator
.menu-header	Section header text
.menu-sm / .menu-lg	Size variants
Dropdown (trigger + floating menu)
.dropdown	Wrapper (use on <details> for no-JS)
.dropdown-menu	Floating menu panel
.dropdown-menu-right	Right-align dropdown
.dropdown-menu-top	Open upward
.dropdown-menu-center	Center-aligned
.dropdown-menu-compact	Compact items (36px)
.dropdown-menu-wide	Wider menu (240px min)
.dropdown-item	Menu item
.dropdown-item-icon	Item leading icon
.dropdown-item-text	Item text (truncated)
.dropdown-item-shortcut	Keyboard shortcut
.dropdown-item-badge	Item badge (pill)
.dropdown-item-check	Checkmark for selected items
.dropdown-item-danger	Red destructive item
.dropdown-item-selected	Selected state with check
.dropdown-divider	Horizontal separator
.dropdown-header	Section header
.dropdown-group	Group of items
.dropdown-submenu	Nested submenu (hover)
.dropdown-mobile-full	Bottom action sheet on mobile (<768px)