Dropdown menu

<DropdownMenu>
    <DropdownMenu.Trigger>
      {(attributes) => <Button attributes={attributes}>Edit</Button>}
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Section>
        <DropdownMenu.Item endSlot="⌘X">Cut</DropdownMenu.Item>
        <DropdownMenu.Item endSlot="⌘C">Copy</DropdownMenu.Item>
        <DropdownMenu.Item endSlot="⌘V">Paste</DropdownMenu.Item>
      </DropdownMenu.Section>
      <DropdownMenu.Section>
        <DropdownMenu.Item endSlot="⌘Z">Undo</DropdownMenu.Item>
        <DropdownMenu.Item endSlot="⌘Y">Redo</DropdownMenu.Item>
      </DropdownMenu.Section>
    </DropdownMenu.Content>
  </DropdownMenu>

DropdownMenu exposes multiple compound components that you can use to achieve any menu composition you need. They all are available through the DropdownMenu component.

<DropdownMenu>
  <DropdownMenu.Trigger>
    {(attributes) => <Button attributes={attributes}>Open</Button>}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Action 1</DropdownMenu.Item>
    <DropdownMenu.Item>Action 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

DropdownMenu itself here serves as the root wrapper for the component.

DropdownMenu supports most of the properties Popover does, which means you can use its event handlers or position it differently. In the same way, you can turn it into a controlled component by using active property.

<DropdownMenu position="top-end" onClose={() => console.log("Closed")}>
  <DropdownMenu.Trigger>
    {(attributes) => <Button attributes={attributes}>Open</Button>}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Action 1</DropdownMenu.Item>
    <DropdownMenu.Item>Action 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

DropdownMenu supports separating items into sections by using DropdownMenu.Section component.

<DropdownMenu>
  <DropdownMenu.Trigger>
    {(attributes) => <Button attributes={attributes}>Open</Button>}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Section>
      <DropdownMenu.Item>Action 1</DropdownMenu.Item>
      <DropdownMenu.Item>Action 2</DropdownMenu.Item>
    </DropdownMenu.Section>
    <DropdownMenu.Section>
      <DropdownMenu.Item>Action 3</DropdownMenu.Item>
      <DropdownMenu.Item>Action 4</DropdownMenu.Item>
    </DropdownMenu.Section>
  </DropdownMenu.Content>
</DropdownMenu>

If you pass the defaultActive flag to the component, it will open the menu on the component mount and use its internal state afterward.

If you pass the active flag, the controlled mode will turn on, and you will have to change the component's state manually. It means that you have to control the state using onOpen and onClose handlers, and you can add any custom logic before updating the state.