Menu

Dropdown built on <details>. Works without JS; the optional js/menu-enhancement.js adds click-outside-to-close.

Basic

Actions
Edit
Copy
Delete
<details class="menu">
  <summary class="menu__trigger">Actions <svg>▾</svg></summary>
  <div class="menu__content">
    <div class="menu__item"><a href="#" class="menu__link">Edit</a></div>
    <div class="menu__separator"></div>
    <div class="menu__item"><a href="#" class="menu__link">Delete</a></div>
  </div>
</details>

Modifiers

ClassEffect
details.menuBase dropdown.
.menu--rightAlign menu content to the right edge of trigger.
.menu--enhancedApplied by menu-enhancement.js, enables deeper shadow.
.menu__trigger / __arrow / __content / __item / __link / __separator / __label / __iconSub-elements.