Dropdown Component
A flexible dropdown component that composes with Button components and custom elements.
Button Composition
Combine dropdown with Button components for consistent styling and behavior.
Size Variants
Button size variants work seamlessly with dropdown positioning and styling.
Alignment Options
Control dropdown menu positioning with left, center, and right alignment options.
Custom Elements
Create sophisticated dropdowns with custom triggers beyond basic buttons.
User Menu
Custom user profile dropdown
JD
John Doe Actions Menu
Button with action items
Link Dropdown
Text link with options
More Options
Auto Alignment
Intelligent positioning that automatically adjusts based on viewport space to prevent dropdown overflow.
Left Edge
Auto-adjusts when near left edge
Center
Centers when space allows
Right Edge
Auto-adjusts when near right edge
How Auto Alignment Works:
- • Horizontal: Left priority → Right fallback → Center when space allows
- • Vertical: Below priority → Above when insufficient space below
- • Smart positioning: Prevents viewport overflow in all directions
- • Responsive: Recalculates on each dropdown open
Component Props
Available properties for the Dropdown component.
| Prop | Type | Default | Description |
|---|---|---|---|
| align | 'left' | 'center' | 'right' | 'auto' | 'left' | Controls menu alignment relative to button. 'auto' intelligently positions based on viewport space |
| closeOnClick | boolean | true | Whether to close dropdown on menu item click |
| button | snippet | required | Snippet defining the dropdown trigger |
| menu | snippet | required | Snippet defining the dropdown menu content |