Dropdown
Dropdown menus for navigation and actions with customizable trigger and content
Basic Dropdown
Simple dropdown menu with button trigger
Show Code
Dropdown Positions
Different dropdown positions
Show Code
Hover Dropdown
Dropdown that opens on hover
Show Code
User Profile Dropdown
Real-world example with avatar and actions
Show Code
Usage Notes
- Use trigger prop for the clickable element that opens the dropdown
- Use content prop for the dropdown menu items
- Position prop controls where the dropdown appears relative to trigger
- Hover prop enables hover-to-open behavior
- Great for navigation menus, context menus, and action lists
API Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| content* | any | Yes | - | Content to display in the dropdown |
| trigger* | any | Yes | - | Component that triggers the dropdown |
| children | any | No | - | Component content |
| class | string | No | - | Additional CSS classes |
| forceOpen | boolean | No | false | Force dropdown to stay open |
| hover | boolean | No | false | Whether dropdown opens on hover |
| id | string | No | - | HTML id attribute |
| onClose | Function | No | - | Callback when dropdown closes |
| onOpen | Function | No | - | Callback when dropdown opens |
| onToggle | (arg0: boolean) => void | No | - | Callback when dropdown toggle state changes |
| open | boolean | No | false | Whether dropdown is open |
| position | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | No | "bottom" | Dropdown position relative to trigger Examples: bottom, top, bottom-end, top-start Since: 1.0.0 |