63Menu

Dropdown on the popover attribute — light dismiss (outside click / Esc) and top layer from the browser, no document-level listener to leak. Items are real buttons/links, so Enter and Space already work.

Use it for

Overflow actions (⋯), account menus

Not for

Choosing a form value — Select
More than ~8 actions — rethink the screen

Live demo

Pure HTML — popovertarget needs no script at all.

markup

<button class="ns-btn ns-btn--outline ns-btn--sm" popovertarget="demo-menu">Actions <i class="ph ph-caret-down" aria-hidden="true"></i></button>
<div id="demo-menu" popover="auto" role="menu" class="ns-popover ns-menu">
  <div class="ns-menu__label">Lesson</div>
  <button class="ns-menu__item" role="menuitem"><i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i> Restart</button>
  <button class="ns-menu__item" role="menuitem"><i class="ph ph-arrow-down" aria-hidden="true"></i> Download notes</button>
  <hr class="ns-menu__sep">
  <button class="ns-menu__item ns-menu__item--danger" role="menuitem"><i class="ph ph-trash" aria-hidden="true"></i> Clear progress</button>
</div>

Accessibility contract

role="menu"/"menuitem"; arrows move focus (the React Menu wires roving focus)
A destructive item uses the error ink AND says what it does