Sidebar Stagger
A sidebar that slides in with staggered item reveal animations for polished navigation UX. Each menu item enters with a slight delay, creating an elegant cascade effect on page load or menu open.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
sidebarstaggerslide-innavigationmenu
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A sidebar that slides in with staggered item reveals for polished navigation UX.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.sidebar { width: 220px; background: #18181b; padding: 24px 0; border-right: 1px solid #27272a; }
.sidebar .item { padding: 12px 24px; color: #a1a1aa; margin: 4px 12px; border-radius: 8px; opacity: 0; animation: slide 0.5s ease forwards; }
.sidebar .item:nth-child(1){animation-delay:0.05s}.sidebar .item:nth-child(2){animation-delay:0.1s}.sidebar .item:nth-child(3){animation-delay:0.15s}.sidebar .item:nth-child(4){animation-delay:0.2s}
@keyframes slide { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }HTML
html
<nav class="sidebar"><div class="item">Dashboard</div><div class="item">Projects</div><div class="item">Settings</div><div class="item">Help</div></nav>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; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.sidebar { width: 220px; background: #18181b; padding: 24px 0; border-right: 1px solid #27272a; }
.sidebar .item { padding: 12px 24px; color: #a1a1aa; margin: 4px 12px; border-radius: 8px; opacity: 0; animation: slide 0.5s ease forwards; }
.sidebar .item:nth-child(1){animation-delay:0.05s}.sidebar .item:nth-child(2){animation-delay:0.1s}.sidebar .item:nth-child(3){animation-delay:0.15s}.sidebar .item:nth-child(4){animation-delay:0.2s}
@keyframes slide { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
</style></head><body>
<nav class="sidebar"><div class="item">Dashboard</div><div class="item">Projects</div><div class="item">Settings</div><div class="item">Help</div></nav>
</body></html>