Dropdown - Keep React
Table of Contents#
- Default Dropdown
- Dropdown With Icon
- Dropdown Submenu
- Dropdown with checkbox
- Dropdown with radio
- API Reference
- Content API Reference
- Reference
Default Dropdown#
The Default Dropdown represents a list of items as dropdown items with <DropdownItem> components.
Dropdown With Icon#
The Dropdown with Icon component allows you to include icons within dropdown items.
Dropdown Submenu#
The Dropdown with submenu component allows you to include submenu within dropdown items.
Dropdown with checkbox#
The Dropdown component allows you to include checkbox within dropdown items.
Dropdown with radio#
The Dropdown component allows you to include radio button within dropdown items.
API Reference#
Here is a list of the props that you can pass to the dropdown component:
| Property | Description | Type | Default |
|---|---|---|---|
| defaultOpen | Default open state of the dropdown menu. | boolean | false |
| open | The controlled open state of the dropdown menu | boolean | false |
| onOpenChange | Event handler called when the open state of the dropdown menu changes. | function | (open: boolean) => void |
| modal | The modality of the dropdown menu. | boolean | false |
Content API Reference#
Here is a list of the props that you can pass to the dropdown content component:
| Property | Description | Type | Default |
|---|---|---|---|
| side | The preferred side of the trigger to render against when open | top right bottom left | bottom |
| sideOffset | The distance in pixels from the trigger. | number | 0 |
| align | The preferred alignment against the trigger. | start center end | center |
Reference#
Our dropdown component is built using the @radix-ui/react-dropdown-menu package. For more information , follow the documentation @radix-ui/react-dropdown-menu.