#
Dropdown
This is a simple dropdown
React / Next.js
#
Dropup
Let's create a simple dropup
React / Next.js
DropDown
Used to create a dropdown or dropup with optional left/right alignment and hover/click behavior.
| Prop | Description | Value(s) |
|---|---|---|
| `position` | Set the horizontal position of the menu | `left | right | default: left` |
| `direction` | Set the vertical orientation of the dropdown | `dropdown | dropup | default: dropdown` |
| `openOnHover` | Controls whether the dropdown opens on hover or click | `true | false | default: true` |
| `button` | JSX element that triggers the dropdown | `ReactNode` |
| `items` | An array of dropdown items with labels and actions | `Array<{ label: ReactNode, onClick?: () => void }>` |
| `width` | Set the width of the dropdown menu | `string | number` |
| `minWidth` | Set the minimum width of the dropdown menu | `string | number` |
| `maxWidth` | Set the maximum width of the dropdown menu | `string | number` |
| `height` | Set the height of the dropdown menu | `string | number` |
| `minHeight` | Set the minimum height of the dropdown menu | `string | number` |
| `maxHeight` | Set the maximum height of the dropdown menu | `string | number` |