GitHub

Components / Overlays & Dialogs / Dropdown

Dropdown stable

Opens with a soft scale. Headings, dividers and a red danger item included.

Preview

Uses: Button — include its CSS alongside this one.

<span class="dd">
  <button class="btn btn-sec btn-md" data-dd-trigger>Actions <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg></button>
  <span class="menu" data-dd-menu>
    <span class="mh">Project</span>
    <a href="#">Edit</a><a href="#">Duplicate</a><a href="#">Copy share link</a>
    <hr>
    <a href="#" class="danger">Delete</a>
  </span>
</span>
.dd{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:196px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;box-shadow:0 16px 40px -14px rgba(16,24,40,.25);padding:5px;opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity .15s,transform .15s;z-index:20}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.menu a{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:7px;color:var(--k-ink);text-decoration:none;font-size:13.5px;font-family:var(--k-font)}
.menu a:hover{background:var(--k-bg-soft)}
.menu a.danger{color:var(--k-danger)}
.menu hr{border:0;border-top:1px solid var(--k-line);margin:5px 4px}
.menu .mh{display:block;font-size:11px;color:var(--k-ink-3);padding:6px 10px 3px;letter-spacing:.06em}

document.querySelectorAll('[data-dd-trigger]').forEach(btn => {
  const menu = btn.parentElement.querySelector('[data-dd-menu]');
  btn.addEventListener('click', e => { e.stopPropagation(); menu.classList.toggle('open'); });
  document.addEventListener('click', () => menu.classList.remove('open'));
  document.addEventListener('keydown', e => { if (e.key === 'Escape') menu.classList.remove('open'); });
});

Usage

Group actions under one trigger. Keep destructive actions last, below a divider, in red.

Accessibility

Close on outside click and on Escape. Move focus back to the trigger when the menu closes.

Previous
Drawer