Build web apps (with AI) the way the browser intended.

import * as Menu from '@base-ui-components/react/menu';
import styles from './ActionMenu.module.css';

export default function ActionMenu() {
  return (
    <Menu.Root>
      <Menu.Trigger
        className={styles.trigger}>
        Select an option
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner
          className={styles.positioner}
          sideOffset={4}>
          <Menu.Popup
            className={styles.popup}>
            <Menu.Item
              className={styles.item}
              onClick={() => handleEdit()}>
              Edit
            </Menu.Item>
            <Menu.Item
              className={styles.item}
              onClick={() => handleDuplicate()}>
              Duplicate
            </Menu.Item>
            <Menu.Item
              className={styles.item}
              onClick={() => handleArchive()}>
              Archive
            </Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

<div class="dropdown">
  <button class="dropdown-btn"
    onclick="toggleDropdown()">
    Select an option
  </button>
  <div class="dropdown-menu" id="menu">
    <button class="dropdown-item">Edit</button>
    <button class="dropdown-item">Duplicate</button>
    <button class="dropdown-item">Archive</button>
  </div>
</div>

<script>
  function toggleDropdown() {
    document.getElementById('menu')
      .classList.toggle('open');
  }
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.dropdown')) {
      document.getElementById('menu')
        .classList.remove('open');
    }
  });
</script>

<style>
  .dropdown { position: relative; }
  .dropdown-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    cursor: pointer;
  }
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 4px;
    min-width: 160px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    padding: 4px;
  }
  .dropdown-menu.open { display: block; }
  .dropdown-item {
    display: block; width: 100%;
    padding: 8px 12px; border: none;
    background: none; text-align: left;
    border-radius: 4px; cursor: pointer;
  }
  .dropdown-item:hover {
    background: #f3f4f6;
  }
</style>

<div class="ui-dropdown">
  <button class="--trigger"
    popovertarget="action-menu">
    Select an option
  </button>
  <div class="--drawer --bottom p-1"
    id="action-menu" popover>
    <button class="ui-button --minimal w-full">
      Edit
    </button>
    <button class="ui-button --minimal w-full">
      Duplicate
    </button>
    <button class="ui-button --minimal w-full">
      Archive
    </button>
  </div>
</div>