Menu

<Menu trigger={<MenuTrigger aria-label="More actions" />}>
  <MenuItem onSelect={() => alert("Edit")}>Edit</MenuItem>
  <MenuItem onSelect={() => alert("Duplicate")}>Duplicate</MenuItem>
  <MenuItem variant="danger" onSelect={() => alert("Delete")}>
    Delete
  </MenuItem>
</Menu>

<Menu trigger={<button className="rounded-[var(--radius-lg)] border border-hairline px-3 py-1.5 text-sm">Options</button>}>
  <MenuItem onSelect={() => alert("One")}>Option one</MenuItem>
  <MenuItem onSelect={() => alert("Two")}>Option two</MenuItem>
</Menu>

<Menu trigger={<button className="rounded-[var(--radius-lg)] border border-hairline px-3 py-1.5 text-sm">Nested Menu</button>}>
  <MenuItem onSelect={() => alert("Root Item 1")}>Root Item 1</MenuItem>
  <MenuSub>
    <MenuSubTrigger>Share Option</MenuSubTrigger>
    <MenuSubContent>
      <MenuItem onSelect={() => alert("Email")}>Email</MenuItem>
      <MenuItem onSelect={() => alert("Slack")}>Slack</MenuItem>
      <MenuSub>
        <MenuSubTrigger>More Platforms</MenuSubTrigger>
        <MenuSubContent>
          <MenuItem onSelect={() => alert("Twitter")}>Twitter</MenuItem>
          <MenuItem onSelect={() => alert("LinkedIn")}>LinkedIn</MenuItem>
        </MenuSubContent>
      </MenuSub>
    </MenuSubContent>
  </MenuSub>
  <MenuItem onSelect={() => alert("Root Item 2")}>Root Item 2</MenuItem>
</Menu>