Dropdown Spring
A dropdown menu that opens with a spring-like bounce using a custom cubic-bezier easing curve. Great for context menus, action menus, or any dropdown that needs a playful, energetic feel.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
dropdownspringmenubounceopen
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A dropdown menu that opens with a spring-like bounce for playful navigation interactions.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.wrap { position: relative; }
.trigger { padding: 10px 20px; background: #27272a; border: 1px solid #3f3f46; border-radius: 8px; color: #fff; cursor: pointer; }
.menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 160px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; overflow: hidden; transform-origin: top; animation: open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.menu .item { padding: 10px 16px; color: #e4e4e7; cursor: pointer; }
.menu .item:hover { background: #27272a; }
@keyframes open { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }HTML
html
<div class="wrap"><button class="trigger">Menu</button><div class="menu"><div class="item">Edit</div><div class="item">Duplicate</div><div class="item">Delete</div></div></div>Full Source
html
<!DOCTYPE html>
<html><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet"><style>
body { margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.wrap { position: relative; }
.trigger { padding: 10px 20px; background: #27272a; border: 1px solid #3f3f46; border-radius: 8px; color: #fff; cursor: pointer; }
.menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 160px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; overflow: hidden; transform-origin: top; animation: open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.menu .item { padding: 10px 16px; color: #e4e4e7; cursor: pointer; }
.menu .item:hover { background: #27272a; }
@keyframes open { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
</style></head><body>
<div class="wrap"><button class="trigger">Menu</button><div class="menu"><div class="item">Edit</div><div class="item">Duplicate</div><div class="item">Delete</div></div></div>
</body></html>