Dropdown Menu

Dropdown menu displays a list of actions that user can trigger.
Can be controlled and uncontrolled
Automatically traps focus when opened
Automatically fits the menu into the viewport or locks it to the position value you provide
Full keyboard navigation
Supports menu sections
Supports custom width
Supports custom trigger element rendering
Similar components:
PopoverSelectTooltip


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.

DropdownMenu itself here serves as the root wrapper for the component. DropdownMenu.Trigger is a trigger providing all 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 MenuItem implementations.

DropdownMenu.Item is an alias for the MenuItem component that also integrates with the DropdownMenu functionality. It still supports most of the properties MenuItem supports.

DropdownMenu supports most of the properties Popover does, 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 separating items into sections by using DropdownMenu.Section component.

Controlled/Uncontrolled

If you pass defaultActive flag to the component – it will open the menu on component mount and will use its internal state 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 and you can add any custom logic before updating the state.

Accessibility

  • It's important 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 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
widthstring, number-false
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
Previous
Next