Framer Update: Relative Overlays. Easily design dropdown navigations in Framer

Relative Overlays completely transform how you design dropdown navigations in Framer. This tutorial shows you how to add professional dropdowns to any layer with a single drag and drop, create reusable navigation components, and customize hover effects that automatically adapt across breakpoints. You'll see how to drag pre-designed menus from the Insert Panel directly onto text layers, customize their positioning and animations, and turn everything into reusable components. The new overlay edit mode lets you design truly professional navigations with features like Dynamic Safe Area (which prevents accidental menu dismissals), variant switching for trigger states, and custom appear effects. Benjamin demonstrates both basic and advanced workflows, from simple dropdown menus to complex navigation systems with animated triggers and component variants. You'll also discover how to swap between different menu styles on the fly and keep multiple overlays perfectly in sync. 0:00 - Introduction to Relative Overlays 0:28 - Adding a Dropdown Menu 1:13 - The New Overlay Edit Mode 2:27 - Overlays within Components 3:14 - Adding Overlays from Scratch 3:40 - Swapping Overlays with Menus 5:13 - Replacing Overlays with Components 7:38 - Switching Variants on Open 8:32 - Dynamic Safe Area 9:05 - Navigations in the Insert Menu 9:49 - More Examples on Nav.Supply Topics covered: dropdown navigation, menu design, overlay components 🌞 Start for free: https://framer.link/yt 📚 Learn more at: https://framer.link/yt-academy 💎 Join the Community: https://framer.link/yt-community 🎉 Follow on X: https://framer.link/yt-x