Dropdown Menu

A contextual menu using the modern HTML Popover API and @utility dropdown-content classes.

Usage

dropdown-menu.html

<button popovertarget="my-dropdown" class="btn btn-neutral">Open Options</button>

<menu id="my-dropdown" popover="auto" class="dropdown-content">
  <li>
    <button class="menu-item">
      <!-- Icon here -->
      Edit
      <span class="menu-shortcut">⌘E</span>
    </button>
  </li>
  <li>
    <button class="menu-item">
      <!-- Icon here -->
      Duplicate
      <span class="menu-shortcut">⌘D</span>
    </button>
  </li>
  <li role="separator" class="menu-separator"></li>
  <li>
    <button class="menu-item menu-item-danger">
      <!-- Icon here -->
      Delete
      <span class="menu-shortcut">⌘⌫</span>
    </button>
  </li>
</menu>