Layout & Design, Navigation

Navigations: Mobile Menus

Benjamin

6:28

65K views

Jun 28, 2023

About this lesson

In this release, we’re introducing new features that improve mobile navigations in Framer, empowering you to deliver exceptional user experiences. We’ve recently shipped viewport unit support within components, for sizing properties such as min-height and max-height. This enables you to design expanded navigation states without relying on nesting. Today, we’re adding the overscroll property, which prevents the page from scrolling along with your navigation. We’ve also refreshed the component previewing experience, avoiding height animations being cut-off. Watch the video above to learn more, or remix our demo here: https://navs-mobile.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:04I'm excited to talk about new features 0:06we've designed to improve mobile 0:08navigations in framer so let's Dive 0:11Right In Here we have a simple top bar 0:15navigation component and it works nicely 0:18on a desktop breakpoint it even scales 0:21down nicely to a tablet size but on a 0:25phone the links will get cut off 0:28so let's double click to edit this 0:31component and design a real mobile 0:33navigation I've already set up my 0:36desktop variant knowing will design a 0:39mobile version so let's have a look 0:41there is this hidden menu icon next to 0:45the logo 0:47and it is contained in this shared stack 0:50called top and we'll be able to stretch 0:52this out on mobile I'll go ahead and 0:55hide that again next we have this stack 0:57called links that contains all these 1:00links horizontally distributed with a 20 1:03pixel Gap and they all have placeholder 1:06links pointing to framer.com this stack 1:09also contains a hidden crit that just 1:12contains a few images that will 1:15resurface on the phone menu and finally 1:18we have this tiny one pixel frame that 1:21represents the bottom border so let me 1:24zoom out and the next step is adding a 1:28second variant here in which we'll be 1:30able to design our mobile menu I'll 1:33rename it to phone and I'll set the 1:35width to 390 matching the default phone 1:39breakpoints in framer we can set the 1:43height to fit content 1:45and the direction of this stack to be 1:48vertical next let's find that hidden 1:51menu icon and bring it back by setting 1:54visible to yes 1:57and then we'll stretch out this stack by 1:59setting width to fill and the distribute 2:03property to space between 2:06now this is starting to look a little 2:08more like a mobile menu 2:10let's now do the links as well we'll set 2:13the width to fill direction to vertical 2:16and align to start 2:19Gap to 10 and I'll add some padding as 2:23well leaving a bit of extra breathing 2:26room at the bottom to ensure our links 2:28do not get cut off on mobile Safari 2:32I'll also select all of these links and 2:35give them a different text style that 2:38simply bumps the font size as promised 2:41let's bring back our grid as well by 2:43setting visible to yes 2:45and there we go we've now converted our 2:49desktop navigation to a mobile 2:51navigation but we're not done just yet 2:54as we would like this menu to be 2:57collapsed by default and then expand on 3:00tap so with the phone variant selected 3:02let's add a third variant to this 3:06component this one we'll call phone open 3:09and this is the one we'll actually use 3:11for the expanded state 3:13so I'll go ahead and set this menu icon 3:16to the close variant and just so you 3:20know this is a very simple component 3:22that just animates these two lines into 3:24an X 3:27we would also like our links to actually 3:30fade in 3:31so I'll go ahead and select the links 3:34and set opacity to zero 3:37then we'll simply select the phone 3:39variant 3:40reset the height to fixed and resize it 3:44down to 64 pixels just like the initial 3:47variant 3:50so now this is really starting to come 3:52together 3:53and as I'm sure you can imagine we can 3:55now start animating between these two 3:57variants 3:58and the trigger of this animation is 4:01this menu icon 4:03so I can go ahead and zoom out a bit 4:05select the menu 4:08and I'll hit L and I'll drop the arrow 4:11onto the phone open variant and I'll do 4:15the same from the phone open variant X 4:18icon 4:19select it hit L and drop it onto the 4:23phone variant so now we can cycle 4:26between these two variants on tap 4:29all right so far so good now it's time 4:33to make this one work really nicely on 4:35mobile devices I'll first add a Max 4:38height and I'll set it to 100 VH 4:42so it can never exceed the height of the 4:45viewport of any device you're viewing it 4:48on 4:49next we'll set overflow to scroll again 4:52we're doing this on the entire phone 4:54open variant and then I'll add a new 4:57property called over scroll and by 5:00default it's already set to contain and 5:04what this does is ensure that we can 5:06freely scroll our mobile menu without 5:11actually also scrolling the page behind 5:14it making for a much better user 5:16experience we've also improved the 5:19previewing experience of your 5:21interactive components where previously 5:24any sort of height animations would get 5:26cut off you can now freely preview this 5:29right from within the component canvas 5:32with our mobile navigation all done all 5:35that's left to do is return to the home 5:37page 5:39and within the phone breakpoint 5:42sets this variant to the phone variant 5:46and here we can see that the setup is 5:49working correctly 5:51but even better is testing this on an 5:53actual mobile device 5:55where we can get a real sense of the 5:58scrolling experience 6:00viewport support in components the 6:03overscore property and the improved 6:07previewing experience allow you to 6:09design high quality mobile menus 6:12directly in framer 6:14thank you so much for watching and stay 6:17tuned for more Navigation updates coming 6:20soon 6:25thank you

TeachesComponent Variants

Also coversBreakpoints Components Frames Grids Links Sizing Spacing Stacks Text Styles Typography

Watch on YouTube ↗

‹ Navigations: Horizontal Side Scroller

Framer Update: New Conditionals & Transforms ›