Dropdown menu

<DropdownMenu>
    <DropdownMenu.Trigger>
      {(attributes) => <Button attributes={attributes}>Edit</Button>}
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Section>
        <DropdownMenu.Item endSlot="NL" selected={true}>Dutch</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>

You can create one or multiple submenus inside your DropdownMenu using DropdownMenu.SubMenu and DropdownMenu.SubTrigger. It automatically handles the focus trapping for the multiple levels of nesting.

<DropdownMenu>
  <DropdownMenu.Trigger>
    {(attributes) => <Button attributes={attributes}>Open</Button>}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>
    <DropdownMenu.SubMenu>
      <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>
        <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.SubMenu>
    <DropdownMenu.Item onClick={() => {}}>Item 3</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

You can either pass a literal width value like 200px or a trigger value to align DropdownMenu content width with its trigger. This is helpful when you're using fullWidth Button component or Select / TextField together with DropdownMenu.

<DropdownMenu width="trigger">
  <DropdownMenu.Trigger>
    {(attributes) => (
      <Select
        name="animal"
        placeholder="Select an animal"
        inputAttributes={attributes}
      />
    )}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Turtle</DropdownMenu.Item>
    <DropdownMenu.Item>Cat</DropdownMenu.Item>
  </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.