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.

Usage

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.

Sections

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.

Accessibility

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.

Properties

DropdownMenu properties, most properties of the Popover component:

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

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

DropdownMenu.Trigger properties:

NameTypeDefaultRequiredComment
children({ attributes }) => ReactNode-true

DropdownMenu.Content properties:

NameTypeDefaultRequiredComment
childrenReactNode-false

DropdownMenu.Section properties:

NameTypeDefaultRequiredComment
childrenReactNode-false