Menu / Dropdown
Dropdown menus for actions, navigation, and context menus. Uses native <details> for zero-JS dropdowns.
Dropdown (No JavaScript)
Preview
Options
<!-- 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
File
<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
Account
Profile
Team
<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
Default ↓
Right ↓
<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
Actions
↕ 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) |