Dropdowns
Examples and documentation for the dropdowns component
🎮 Interactive Dropdown Demo
Live Preview
100ms
200ms
800ms
Animation
shift-away
Placement
bottom-start
Duration
200ms
Trigger
Click
Interactive
Yes
Hide on Click
Yes
🎬 Animation Showcase
Click each dropdown to see different animation effects
Shift Away
Shift Toward
Scale
Perspective
Fade
📍 Placement Showcase
See how dropdowns position themselves around the trigger
bottom-start
bottom
bottom-end
top-start
top
top-end
left-start
left
left-end
right-start
right
right-end
⏱️ Animation Duration Variations
See how different durations affect the animation feel
Fast (150ms)
Normal (200ms)
Slow (400ms)
Very Slow (600ms)
🔧 Basic Examples
Simple dropdown examples for common use cases