Layout & Design, Navigation

Navigations: Desktop Menus

Benjamin

7:13

42K views

Apr 11, 2023

About this lesson

This video tutorial covers the the recently introduced Viewport unit support for the Min Height and Max Height properties for your Pages and Components in Framer. This allows you to design incredible desktop navigations within a single Component. Demo: https://navs-desktop.framer.wiki/

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

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

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

0:00yo my name is Benjamin and in this video 0:03I'm excited to cover new properties that 0:07unlock new types of desktop navigations 0:09you can now use viewport units within 0:12the Min and Max height properties and 0:16these will work on any layer within your 0:18page but also within components so let's 0:22dive into our demo project and have a 0:24look at how this works we'll create a 0:27desktop navigation from scratch so here 0:31we have a simple topar with a logo and a 0:34button it spins to the top left and 0:37right sides and it has a fixed width and 0:40height and we can right click to turn 0:43this into a component 0:45I'll hit create and this brings us into 0:49the component canvas so here we'd like 0:53to create two variants the first one 0:55will be the open variant or the expanded 0:59navigation state 1:01and we'll create another variant called 1:03closed which will essentially be the 1:06initial state of the top bar so here 1:09I'll set the height to something like 1:11800 pixels 1:13and then I'll zoom out to create a 1:16second variant 1:17and this we'll call the closed variant 1:20and we'll give this one a height of 64 1:24pixels again because we'll use this as 1:26the initial State later making the 1:29primary variant the expanded state in 1:32setups like this is quite useful as it 1:35allows us to edit all the links in one 1:38go without creating unnecessary variant 1:41overrides I'll select the text layer 1:44here remove the variable from the 1:47content property and let's label this 1:50with close 1:52and then we'll label it menu again in 1:54the second variant 1:57[Music]1:59next we'll go back to the primary 2:01variant and select the wrapping stack of 2:06our text label and with that selected 2:09I'll hit L to add a new interaction on 2:13click to the second variant and I'll do 2:16the same thing in Reverse so we can now 2:19click to cycle between these two 2:22variants 2:23next let's add some links to our menu so 2:27I'll hit D and I'll add a text layer 2:30onto the canvas and I'll also give it a 2:34text style now before I drop it in I'd 2:37like to quickly show you that we have 2:39this logo and button stack that is 2:42absolutely positioned within our 2:44navigation so it doesn't occupy any 2:47space in our stack it will always be 2:50positioned 20 pixels from the top left 2:53and right sides and here you'll see that 2:56the navigation itself is a stack so 2:59let's go back to our text layer and drag 3:02it onto the navigation and I'll hit 3:05command D to duplicate it a few times 3:08adding a unique label to each navigation 3:12item then I'll select all navigation 3:15items right click and I'll hit add stack 3:19and I'll set the width and height of 3:22this stack to fill I'll also set a line 3:26to left and I'll give this a padding of 3:2820 pixels this is normally where we 3:31would add the links but we'll skip that 3:33part in this video instead we'll focus 3:36on the new properties that can help us 3:39solve the issue we now have in this 3:41setup we would like for this component 3:43to animate from its close date of 64 3:46pixels to the open state that should 3:50occupy the entirety of the viewport 3:52however our links are set to fill so 3:55they take up the available space which 3:57would give us unwanted animations more 4:00so this wouldn't really animate to the 4:03viewport at all given that we have a 4:05fixed height set of 800 pixels with this 4:08release we can now fix both of these 4:11issues I'll select the links and I'll 4:13add a Min height property I'll then set 4:16the type to viewport so we get 100 VH 4:20AKA it occupies the entirety of the 4:23viewport and we can set the heights of 4:27the parent stack to Auto and then we can 4:30reselect the links stack and set its 4:34height to Auto as well 4:36so we're now animating from a fixed 4:39height of 64 pixels to the entirety of 4:42the viewport plus setting this minimum 4:45height also fixed our links collapsing 4:48in the closed variant 4:51and just like you can do with fixed 4:53layers on your breakpoints you can 4:55resize this viewport Bill to affect how 4:58the viewport height is represented on 5:01the canvas and now you can even double 5:05click on it to set a manual value 5:10with our basic setup in place it's time 5:13to go back to the home page and make 5:16some final edits here 5:18first we'll want to set the initial 5:20variant to the closed variant 5:24we'll also want to set the position type 5:26to fixed and finally we know we're 5:30animating the height here so we want to 5:33make sure the height is set to auto 5:36all right and with that in place let's 5:39go ahead and give our page a preview 5:42and as we click on menu the navigation 5:45animates from 64 pixels to the entirety 5:49of the viewport 5:51however our animation is quite fast so I 5:54can go back in and change the transition 5:57settings as such stiffness to 300 and 6:02damping to 50. and let's give this 6:05another preview 6:09that's much better 6:11[Music]6:12we can also play a bit with the 6:14background so for example we could give 6:17it some Alpha so you can still see the 6:21background colors I'll set it to about 6:2360 percent and then we can go back to 6:26the preview 6:29and there we go now there's a lot more 6:32we could do here like add custom appear 6:35animations or hover variants and you can 6:38find a final version of this demo with a 6:41few of these extra additions in the 6:44description down below and that's pretty 6:46much it for this video we hope you enjoy 6:49these new features and stay tuned for 6:52more Navigation updates coming soon 6:56[Music]6:58foreign 7:03foreign

TeachesComponent Variants Min & Max Sizing

Also coversBreakpoints Components Hover & Press Links Sizing Spacing Stacks Text Styles Transitions & Easing Variables

Watch on YouTube ↗

‹ Framer Update: Site Search

How to start selling your Framer templates through Lemon Squeezy ›