design-infraReport a problem or share feedback← Catalog
Blur Glide Menu
curatedfreemicrokit/blur-glide-menu
A nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
$
npx shadcn@latest add https://microkit.co/r/blur-glide-menu.jsonnpm deps: lucide-react
Our notes
Nested menu (role=menu/menuitem, aria-haspopup, back button) where the outgoing step blurs then glides aside while the surface animates to the incoming step's height — a CSS-keyframe take on the multi-view drawer. motion-reduce shortens every transition. Demo data and colours are hard-coded.- Source
- MicroKit
- Kind
- component
- Categories
- navigation, modal
- Use as
- recipe — technique you apply to your own markup
- Applies to
- navigationmodal
- Motion
- on state · medium · css · low cost · respects reduced motion
- Tags
- css, click, menu, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Menu dropdowntransitions/menu-dropdownDropdown origin-aware scale/fade.
- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.
- Spotlight Indicatormicrokit/spotlight-indicatorVertical-nav indicator: JS measures the active item and a 2px glowing rail transitions top/height (300ms). Lovely for sidebars and settings nav. No reduced-motion guard; orange #f97316 glow and hex greys are hard-coded — use var(--primary) for the rail and its box-shadow.