Skip to content

Dropdown

Deprecated

Deprecation

Use DropdownMenu instead.


The Dropdown component is a lightweight context menu for housing navigation and actions.

Use Dropdown.Button as the trigger for the dropdown, or use a custom summary element if you would like. You must use a summary tag in order for the dropdown to behave properly!. You should also add aria-haspopup="true" to custom dropdown triggers for accessibility purposes. You can use the Dropdown.Caret component to add a caret to a custom dropdown trigger.

Dropdown.Menu wraps your menu content. Be sure to pass a direction prop to this component to position the menu in relation to the Dropdown.Button.

Default example

With custom button

Component props

The Dropdown component is extended from the Details component and gets all props that the Details component gets.

NameTypeDefaultDescription
directionString'sw'Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w'
sxSystemStyleObject{}Style to be applied to the component

See https://primer.style/react/Buttons#component-props

NameTypeDefaultDescription
sxSystemStyleObject{}Style to be applied to the component
NameTypeDefaultDescription
sxSystemStyleObject{}Style to be applied to the component