Automatically fits the menu into the viewport or locks it to the position value you provide
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 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 supports separating items into sections by using DropdownMenu.Section component.
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.
It's essential to pass the attributes provided by the DropdownMenu component to your interactive trigger component. That way you will ensure that all the user events and aria attributes are assigned correctly.
DropdownMenu manages the navigation and focus when used with the keyboard. After opening the menu, the focus is moved to the first menu item, and next/previous item can be selected with arrow keys. Pressing Tab, Esc, or clicking outside will close the menu and return the focus back to the trigger.