Tippy.js Dropdown Menu with Submenus — Free HTML CSS JS Snippet

<div class="dm-wrap">
  <button class="dm-trigger" id="dmTrigger" type="button">Actions &#9662;</button>
  <div id="dmMenuTemplate" style="display:none">
    <div class="dm-menu">
      <button class="dm-item" data-action="rename">Rename</button>
      <button class="dm-item" data-action="duplicate">Duplicate</button>
      <button class="dm-item dm-has-sub" id="dmMoveTo">Move to &rsaquo;</button>
      <button class="dm-item dm-danger" data-action="delete">Delete</button>
    </div>
  </div>
  <div id="dmSubmenuTemplate" style="display:none">
    <div class="dm-menu">
      <button class="dm-item" data-action="move-projects">Projects</button>
      <button class="dm-item" data-action="move-archive">Archive</button>
      <button class="dm-item" data-action="move-trash">Trash</button>
    </div>
  </div>
  <div class="dm-log" id="dmLog">No action yet</div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.dm-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dm-trigger{padding:10px 16px;border-radius:9px;border:1.5px solid #e2e8f0;background:#fff;color:#334155;font:700 13px system-ui;cursor:pointer}
.dm-trigger:hover{border-color:#6366f1}
.dm-log{font-size:12.5px;color:#64748b}
.dm-menu{width:180px;background:#fff;border-radius:10px;padding:6px;display:flex;flex-direction:column}
.dm-item{width:100%;text-align:left;padding:9px 10px;border:none;background:none;border-radius:7px;font:600 13px system-ui;color:#334155;cursor:pointer}
.dm-item:hover{background:#f1f5f9}
.dm-danger{color:#dc2626}
.dm-danger:hover{background:#fef2f2}
.tippy-box[data-theme~='fwd-menu']{background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.18);border:1px solid #e2e8f0}
.tippy-box[data-theme~='fwd-menu'] .tippy-content{padding:0}

var logEl = document.getElementById('dmLog');
var triggerBtn = document.getElementById('dmTrigger');

function logAction(text) { logEl.textContent = text; }

// Every element Tippy will receive as "content" has to be captured into a
// variable BEFORE any tippy() call runs. Tippy moves a DOM-node content
// value out of the live page into its own (initially detached, in-memory)
// popper structure the moment the instance is created -- so re-querying
// document.getElementById() for that same id afterward returns null, even
// though the element still exists and still works via the reference already
// held in JS. dmMoveTo is nested inside dmMenuTemplate, so it has to be
// captured here too, before mainInstance's construction detaches its parent.
var menuTemplate = document.getElementById('dmMenuTemplate');
var subTemplate = document.getElementById('dmSubmenuTemplate');
var moveToItem = document.getElementById('dmMoveTo');

// Both templates start with inline display:none so they're invisible sitting
// in the page before Tippy adopts them -- but that inline style travels WITH
// the element into the tippy-box, and Tippy's own show/hide only toggles the
// box wrapper, never this inner style. Left in place, the content stays
// collapsed to zero size forever, even while the box itself reports visible.
menuTemplate.style.display = '';
subTemplate.style.display = '';

var mainInstance = tippy(triggerBtn, {
  content: menuTemplate,
  theme: 'fwd-menu',
  interactive: true,
  trigger: 'click',
  placement: 'bottom-start',
  arrow: false,
  appendTo: document.body,
  onShow: function () { subInstance.hide(); },
});

// The submenu is a SEPARATE Tippy instance anchored to the "Move to" item --
// not a nested menu drawn inside the first one. Two independent instances,
// each with their own show/hide lifecycle, is what makes hovering off the
// submenu close only the submenu rather than the whole menu tree.
var subInstance = tippy(moveToItem, {
  content: subTemplate,
  theme: 'fwd-menu',
  interactive: true,
  trigger: 'mouseenter click',
  placement: 'right-start',
  arrow: false,
  appendTo: document.body,
  offset: [-6, 0],
});

menuTemplate.addEventListener('click', function (e) {
  var btn = e.target.closest('[data-action]');
  if (!btn) return;
  logAction('Action: ' + btn.getAttribute('data-action'));
  subInstance.hide();
  mainInstance.hide();
});

subTemplate.addEventListener('click', function (e) {
  var btn = e.target.closest('[data-action]');
  if (!btn) return;
  logAction('Action: ' + btn.getAttribute('data-action'));
  subInstance.hide();
  mainInstance.hide();
});