Animations, Layout & Design, Navigation

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

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

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

Benjamin

·

10:21

·

36K views

·

Oct 19, 2023

About this lesson

Meet Relative Overlays—a completely new way to design navigations in Framer. Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more. Relative Overlays can be added to Frames, Text, and even Components. We’ve also updated all Navigations in the Insert Panel, and added new Menus that you can drop onto any layer to instantly create new Overlays. Design dropdowns, menus, and tooltips within minutes. Watch the video above for a complete overview, and head to https://nav.supply/ for brand new demos to remix.

https://www.youtube.com/watch?v=61l4M2nByIM&t=0s - Introduction to Relative Overlays

https://www.youtube.com/watch?v=61l4M2nByIM&t=28s - Adding a Dropdown Menu

https://www.youtube.com/watch?v=61l4M2nByIM&t=73s - The New Overlay Edit Mode

https://www.youtube.com/watch?v=61l4M2nByIM&t=147s - Overlays within Components

https://www.youtube.com/watch?v=61l4M2nByIM&t=194s - Adding Overlays from Scratch

https://www.youtube.com/watch?v=61l4M2nByIM&t=220s - Swapping Overlays with Menus

https://www.youtube.com/watch?v=61l4M2nByIM&t=313s - Replacing Overlays with Components

https://www.youtube.com/watch?v=61l4M2nByIM&t=458s - Switching Variants on Open

https://www.youtube.com/watch?v=61l4M2nByIM&t=512s - Dynamic Safe Area

https://www.youtube.com/watch?v=61l4M2nByIM&t=545s - Navigations in the Insert Menu

https://www.youtube.com/watch?v=61l4M2nByIM&t=589s - More Examples on Nav.Supply

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00[Music]0:12yo my name is Benjamin and in this video 0:16I'm super excited to introduce relative 0:18overlays in framer this release makes it 0:22much easier to design large navigations 0:25with all sorts of drop- down menus so 0:28let's have a look at what what's new 0:31here I have a simple navigation it's 0:34just a stack layer with a few text 0:37layers within it and let's say we wanted 0:40to add a drop- down menu to the product 0:44item here with it selected I'll open the 0:48insert panel and I'll head over to an 0:51all new category called menus and this 0:54includes a bunch of custom design menus 0:57that serve as starting points for your 0:59your navigation and I can simply click 1:02and drag directly from the insert panel 1:05onto our text layer and doing so 1:09instantly adds it as a relative overlay 1:13and this brings us directly into the new 1:15edit mode and all the items within it 1:19are directly customizable so these menus 1:22should really save you a lot of time 1:24manually setting up these common menu 1:27layout patterns and on the right right 1:30here we have a bunch of new properties 1:32allowing us to customize our relative 1:35overlays we can quickly play with things 1:37like 1:39alignment 1:42positioning and different ways to 1:45trigger and dismiss the overlay most 1:48default values here are perfect for this 1:50demo but I do want to add a little bit 1:53more distance between the item and the 1:55menu so I'll use the shift arrow down 1:58keys to add some more distance and 2:01that's really all we had to do so let me 2:04zoom out a bit and let's hit the preview 2:07button to see what we have so far as we 2:10now hover over product our menu fades in 2:15nicely and automatically dismisses again 2:18as well and all of this essentially with 2:21a single drag and drop I'll hit done to 2:25exit the edit mode here and next let's 2:28talk about comp components in real 2:31projects you most often want this 2:34navigation to be a component so you can 2:37reuse it across all of your pages so 2:39I'll hit command K to turn this into a 2:42new component now you might be wondering 2:45what happened to the relative overlay 2:48that we made earlier so let's have a 2:51look we designed an all new overlay edit 2:54mode specifically for components 2:57allowing you to design truly reusable 2:59navigations with drop- down menus and 3:03very similar to the edit mode on pages 3:06you can preview in the top left corner 3:10and you can exit from the top right next 3:14let's also add a drop down to resources 3:18but this time showing a little bit of a 3:20different workflow I'll select the text 3:23layer and then I'll head over to the 3:25overlays property and this allows us to 3:29add new relative overlays from scratch 3:32and we give you this Frame that you can 3:35customize to your liking and we also add 3:38an appear effect by default but at this 3:40point we might not know exactly the type 3:43of menu we're after just yet so to allow 3:46you to experiment with different types 3:48of menus on the go we've also 3:51implemented a swap feature so I can go 3:54back to the insert menu and drag and 3:57drop different menus Direct ly onto our 4:00existing overlay to swap them and just 4:04like before I can go ahead and customize 4:07this menu right 4:17away and I'll again bump this one down 4:2020 extra pixels and with the menu 4:23selected we can also customize the 4:25appear effect that framer gives us so 4:28let's also add a little bit of a scale 4:31in animation to our appear effect then 4:34I'll right click to copy this effect and 4:38then we'll use the layer panel to 4:40instantly jump to the previous overlay 4:43and here we can simply right click and 4:45paste the appear effect the ability to 4:48jump between different overlays allows 4:50you to easily keep them in sync and all 4:53of this happens within a component so 4:55it's all entirely reusable and if we now 4:58give this a preview you can see that we 5:01now have two overlay menus that each 5:04appear on Hover and that have a nice 5:07subtle skill in effect so those were the 5:11basics of relative overlays next I'll 5:14Transform this document into something 5:17that's a little higher Fidelity to show 5:19you what else we can do with this new 5:22feature there are two major changes in 5:25this setup one I componentized all the 5:29links and this allows me to reuse them 5:32in the mobile 5:34version so we get these same links both 5:38for the overlay and on the mobile menu 5:42and we simply use variants to change the 5:44styling between the two and the second 5:47thing is that our triggers are now also 5:51components with two simple variant one 5:54for the default State or the closed 5:57variant and one for the open state 6:00called the open variant and here I've 6:03simply changed the color of the text and 6:06I flipped over the carrot as well so 6:09let's go back to the 6:11navigation and let's add an overlay to 6:14the product 6:16item and instead of customizing it I'll 6:19quickly exit out of the edit mode here 6:23I'll pan over to the product links 6:27instance and I'll copy this 6:33component then I'll go back into the 6:37overlay I'll right click and I'll select 6:40paste in place and this swaps the 6:44default frame with our custom component 6:47this is a super powerful feature as it 6:50means you don't have to deal with any 6:52nested layouts here and the links are 6:55completely reusable the menu takes care 6:58of all of the layout and styling and we 7:00can focus on the overlay settings and 7:04effects I have already set up a PA 7:06effects for the resources and the 7:09community links so I'll quickly grab the 7:12appear effect from that 7:15overlay and I'll paste it onto the one 7:18we just 7:21made all right now let's go back to the 7:24homepage and give this a preview so our 7:28menu is working 7:29and everything is set up within reusable 7:32components but our trigger here doesn't 7:35update just yet so let's take a look at 7:39how to switch the variant on open when 7:42the trigger of your overlay is a 7:45component with variants you get the 7:48option to switch the variants whenever 7:51the overlay is open it's very simple we 7:55just get this single drop down here and 7:58we can pick which VAR varant to show 8:00alongside our 8:01menu and again this is the variant we're 8:04switching to and this is very powerful 8:07because we can design anything in these 8:10variants and animate between the two 8:13with custom transitions so let's go back 8:15to the preview and as you can see we now 8:20have a trigger that's aware of the state 8:22of our menu it animates to this state on 8:26open and it animates back whenever we 8:29dismiss the 8:31menu now during this video you might 8:34have noticed that even though we have a 8:36gap between our trigger and our menu 8:40framer is smart enough not to dismiss 8:43our overlay menu when we move the cursor 8:46from the trigger onto the menu and this 8:49is thanks to our Dynamic save area we 8:53calculate a safe area for your cursor to 8:56travel within in real time so your menus 8:59will never accidentally dismiss as 9:02you're moving your cursor as a final 9:05note I would also like to point out that 9:07we've completely refreshed the 9:09navigation section within our insert 9:12menu as well you can simply drag and 9:15drop one onto your desktop 9:18breakpoint and it will adapt to your 9:20existing breakpoints as well for example 9:24this one has drop- down menus on the 9:26desktop 9:28breakpoint 9:32and it scales down to a custom overlay 9:35on mobile as well with all links neatly 9:39set up within components as well so you 9:41can rest assured that any edits you make 9:44will instantly be reflected across all 9:47of your breakpoints and if you'd like to 9:49remix complete projects that are set up 9:52end to endend you can find many more 9:55custom navigation demos on nav dos 9:58Supply as well well and that's pretty 10:01much it for this video thank you so much 10:04for watching we really hope you enjoy 10:07using these new features and stay tuned 10:10for more updates coming 10:19soon

Also coversAppear Effect Breakpoints Component Variants Components Custom Cursors Frames Hover & Press Links Remix Links Stacks Transitions & Easing

Watch on YouTube ↗

‹ Make A Responsive Navigation With Dropdown Menus From Scratch

AI-Powered Localization — Translate and Customize your Entire Site in Framer ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.