Skip to content


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

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

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

directionString'sw'Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w'
onClickFunctionnoneUse the onClick handler to add additional functionality when the button is clicked, such as fetching data.

No additional props.

No additional props.

Edit this page on GitHub
3 contributorsVanAndersonemplumsdavilag
Last edited by VanAnderson on July 22, 2021