Dropdown Menu
Dropdown menu displays a list of actions that a user can choose.

Dropdown menu shouldn't be used to replace Select functionality, since native select accessibility features will be lost unless they're implemented manually in the product. Dropdown menu is high-level component with predefined behavior. For more granular control over its functionality check Popover.


DropdownMenu exposes a couple of compound components that you can use to achieve any menu composition you need. They all are available through the DropdownMenu component entry point.

DropdownMenu itself here serves as the root wrapper for the component. DropdownMenu.Trigger is a trigger providing all the required attributes and handlers for your component, like Button in this example. DropdownMenu.Content is a wrapper for the overlaying content with menu items. Both of them work similar to how Popover component works but provide additional features on top of the default Popover and Menu implementations.

DropdownMenu.Item is an alias for the MenuItem component in this case that also integrates with the DropdownMenu functionality. However, it still supports all properties MenuItem supports.

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


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

Controlled/uncontrolled state

If you pass defaultActive flag to the component – it will open the menu on component mount and will preserve the default toggle logic afterwards.

If you pass active flag – controlled mode will be turned on, and you will have to change the state of the component manually. This means that you have to control the state using onOpen and onClose handlers. However, it will let you add custom logic before updating the state.


DropdownMenu manages the navigation and focus when used with keyboard. After opening the menu, 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.


DropdownMenu properties, most properties of the Popover component:

idstring-falseCustom id override
positiontop, top-start, top-end, bottom, bottom-start, bottom-end, start, end-false
onOpen() => {}-false
onClose() => {}-false
widthfull, string, number-false
activeboolean, null-false
triggerTypeclick, hoverclickfalse
widthstring, number-false

DropdownMenu.Item properties: All MenuItem properties except fullWidth and size, they are predefined.

DropdownMenu.Trigger properties:

children({ attributes }) => ReactNode-true

DropdownMenu.Content properties:


DropdownMenu.Section properties: