Dropdown
- Deprecated
- Not reviewed for accessibility
Deprecation
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.
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.
Dropdown.Menu
| 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 |
Dropdown.Button
See https://primer.style/react/Buttons#component-props
Dropdown.Caret
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |
Dropdown.Item
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |
