Dropdown
The Dropdown component is used to show collapsible child items.
1. Import
KUMUI exports 11 Dropdown-related components:
import { DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
Button, } from "@rohitgadekar/kimui";
2. Usage
3. API
3.1 DropdownMenu
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | DropdownMenu components such as trigger, items, etc. | - |
3.2 DropdownMenuTrigger
| Attribute | Type | Description | Default |
|---|---|---|---|
| asChild | boolean | Whether the DropdownMenuTrigger is wrapped inside another component (like a Button) | false |
3.3 DropdownMenuContent
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Content of the dropdown menu (items, labels, separators) | - |
3.4 DropdownMenuLabel
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Label for the dropdown menu, often used as a heading for groups of items | - |
3.5 DropdownMenuItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| onClick | function | Callback function for handling item click events | - |
| children | React.ReactNode | Content displayed inside the menu item | - |
3.6 DropdownMenuSeparator
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | A visual separator between menu items | - |
3.7 DropdownMenuCheckboxItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| checked | boolean | Whether the checkbox is checked | false |
| onCheckedChange | function | Callback function to handle checkbox state changes | - |
| children | React.ReactNode | Content of the checkbox item | - |
3.8 DropdownMenuSub
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Submenu component containing further items | - |
3.9 DropdownMenuSubTrigger
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The trigger item for the submenu, usually a label or icon | - |
3.10 DropdownMenuSubContent
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Items inside the submenu | - |
3.11 DropdownMenuShortcut
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Shortcut key display for the menu item | - |