Dropdown
- Deprecated
- Not reviewed for accessibility
Use ActionMenu 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.
The Dropdown component is extended from the Details component and gets all props that the Details component gets.
| Name | Type | Default | Description |
|---|---|---|---|
| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
| sx | SystemStyleObject | {} | Style to be applied to the component |
See https://primer.style/react/Buttons#component-props
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |