Context Menu

<div class="context-menu context-menu-open" style="position: relative; display: inline-block;">
  <button class="context-menu-item">
    <span class="context-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
    <span class="context-menu-item-text">Edit</span>
    <span class="context-menu-item-shortcut">⌘E</span>
  </button>
  <button class="context-menu-item">
    <span class="context-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
    <span class="context-menu-item-text">Copy</span>
    <span class="context-menu-item-shortcut">⌘C</span>
  </button>
  <button class="context-menu-item">
    <span class="context-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg></span>
    <span class="context-menu-item-text">Paste</span>
    <span class="context-menu-item-shortcut">⌘V</span>
  </button>
  <div class="context-menu-divider"></div>
  <button class="context-menu-item context-menu-item-danger">
    <span class="context-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></span>
    <span class="context-menu-item-text">Delete</span>
    <span class="context-menu-item-shortcut">⌫</span>
  </button>
</div>

Requires: ux.min.css

<div class="fixed min-w-[180px] max-w-[280px] p-1 bg-base-100 border border-base-300 rounded-box shadow-lg z-600">
  <button class="flex items-center gap-2 w-full text-left min-h-[36px] px-3 text-sm rounded-field hover:bg-base-200">
    <svg class="size-4.5 opacity-70" ...></svg>
    <span class="flex-1">Edit</span>
    <span class="text-xs text-base-content/40 ml-auto">⌘E</span>
  </button>
  <!-- ... -->
</div>

Requires: tw.min.css

// Show context menu on right-click:
// element.addEventListener('contextmenu', (e) => {
//   e.preventDefault();
//   menu.style.left = e.clientX + 'px';
//   menu.style.top = e.clientY + 'px';
//   menu.classList.add('context-menu-open');
// });
//
// Close on click outside:
// document.addEventListener('click', () => {
//   menu.classList.remove('context-menu-open');
// });

<div class="context-menu context-menu-open" style="position: relative; display: inline-block;">
  <div class="context-menu-section">Edit</div>
  <button class="context-menu-item">
    <span class="context-menu-item-text">Undo</span>
    <span class="context-menu-item-shortcut">⌘Z</span>
  </button>
  <button class="context-menu-item">
    <span class="context-menu-item-text">Redo</span>
    <span class="context-menu-item-shortcut">⌘⇧Z</span>
  </button>
  <div class="context-menu-divider"></div>
  <div class="context-menu-section">Selection</div>
  <button class="context-menu-item context-menu-item-selected">
    <span class="context-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></span>
    <span class="context-menu-item-text">Word Wrap</span>
  </button>
  <button class="context-menu-item context-menu-item-disabled">
    <span class="context-menu-item-text">Minimap</span>
  </button>
</div>

Requires: ux.min.css

<div class="inline-block min-w-45 max-w-70 p-1 bg-base-100 border border-base-300 rounded-box shadow-lg" style="position: relative;">
  <div class="text-xs font-semibold uppercase tracking-wide select-none px-3 py-2 text-base-content/40">Edit</div>
  <button class="flex items-center gap-2 w-full text-left border-none bg-transparent cursor-pointer text-sm min-h-9 px-3 rounded-field hover:bg-base-200">
    <span class="flex-1 truncate">Undo</span>
    <span class="text-xs text-base-content/40 ml-auto pl-4">⌘Z</span>
  </button>
  <button class="flex items-center gap-2 w-full text-left border-none bg-transparent cursor-pointer text-sm min-h-9 px-3 rounded-field hover:bg-base-200">
    <span class="flex-1 truncate">Redo</span>
    <span class="text-xs text-base-content/40 ml-auto pl-4">⌘⇧Z</span>
  </button>
  <div class="h-px my-1 bg-base-300"></div>
  <div class="text-xs font-semibold uppercase tracking-wide select-none px-3 py-2 mt-1 text-base-content/40">Selection</div>
  <button class="flex items-center gap-2 w-full text-left border-none bg-transparent cursor-pointer text-sm min-h-9 px-3 rounded-field text-primary hover:bg-base-200">
    <span class="size-4.5 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></span>
    <span class="flex-1 truncate">Word Wrap</span>
  </button>
  <button class="flex items-center gap-2 w-full text-left border-none bg-transparent text-sm min-h-9 px-3 rounded-field opacity-40 pointer-events-none cursor-not-allowed">
    <span class="flex-1 truncate">Minimap</span>
  </button>
</div>

Requires: tw.min.css

// Toggle items: item.classList.toggle('context-menu-item-selected');