Layout & Design, Navigation

Make A Responsive Navigation With Dropdown Menus From Scratch

Benjamin

19:49

63K views

Oct 20, 2023

About this lesson

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch. This uses the recently-introduced Relative Overlay feature: watch the announcement video to learn more about how those work. You can find and freely remix the final demo here: https://nav.supply/ alongside more navigation demos.

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=0s - Introduction

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=26s - Adding Text Layers

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=50s - Grouping with Stacks

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=73s - Designing a Trigger with a Caret

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=113s - Creating a Trigger Component

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=163s - Adding our first Dropdown

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=276s - Creating a Navigation Component

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=290s - Creating a Navigation Phone Variant

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=318s - Editing our Navigation Phone Variant

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=436s - Making Links reusable

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=549s - Adding Links to the Phone Variant

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=605s - Fixing Links and Styling on Phone

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=694s - Adding a Second Dropdown

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=904s - Adding Links to the Resources Dropdown

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=930s - Designing the Expanding Interaction

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=1081s - Finalizing the Link Sorting

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=1131s - Removing the Border from the Expanded State

https://www.youtube.com/watch?v=QtjU4V_o8eg&t=1146s - We did it!

🌞 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'll show you how to create a responsive 0:06navigation with drop downs completely 0:09from 0:10scratch so this is our starting setup we 0:14have a navigation stack and all it 0:17currently contains is a stack with an 0:20icon and the title I'll select the 0:23navigation and I'll hit T and I'll start 0:26typing right here to add our first text 0:30text layer onto this stack then I'll 0:32select a Tex stle that I pre-made to get 0:35the styling Just Right Next I'll hit 0:39command D to duplicate this item a few 0:42times and I'll change the content in the 0:44process so this yields us a few 0:48different Navigation items I'll hold 0:50shift and select all of these in one go 0:55and I'll right click to add a new stack 0:58then I'll set width to fill 1:00height to fit content and distribute to 1:04end and I'll also set the Gap to 25 1:08pixels so now we have our basic setup in 1:11place I'll jump to the asset panel and 1:14I'll drag in a carrot this is a very 1:18simple component that I 1:20prepared it's a single graphic wrapped 1:24in a frame and that frame is rotated in 1:28the second variant 1:30so let's go back and group these I'll 1:33select both right click and I'll select 1:37add stack and then I'll right click 1:39again and hit fit 1:42content now we can add some padding to 1:45the top and bottom as well and there we 1:49go I'll decrease the Gap a little bit 1:53and then we can turn this into a 1:56[Music]1:58component so I'll hit command K select 2:01create component and you can give this 2:04any name you'd like so let's zoom in a 2:08little bit and let's add a second 2:12variant I'll name the first one default 2:16and the second one open and on this 2:19second one I'll set opacity to 2:220.5 and I'll change the variant of the 2:26carrot and for the text I just had it 2:29selected and and hit five on my keyboard 2:32which is a nice little shortcut to 2:34quickly set opacity so that's it for the 2:37triggers of our drop downs and we can 2:40always customize the label here as well 2:43next let's add our first drop down so 2:47I'll select our component 2:49instance and then I'll open up the 2:52insert menu and I'll head over to the 2:55new menus category and I'll grab one of 2:58these ones 3:00and I'll drag and drop it right onto the 3:03component we just made and this is a 3:06nice little shortcut to quickly add it 3:09as a relative overlay here we can tweak 3:12the appear effect and even the spring 3:20transition and let's set height to fit 3:24content 3:26again and I think all of these settings 3:28look good 3:32so we can now select the trigger and set 3:34on open to the open 3:37variant and if we give that a 3:41preview that should mostly do the trick 3:44I see I get a little text cursor here on 3:47Hover and we don't have any links just 3:50yet to fix the cursor I'll add a user 3:54Select Property that is set to none to 3:58the component 4:00and let's also add some links to the 4:04menu here I'll just link them all to 4:07framer 4:09dcom and I'll make sure they have one of 4:12the link styles that I had already set 4:14up in this project this also ensures 4:18they get a nice little hover state which 4:20you can easily Define within your link 4:23Styles all right so we have our first 4:26drop down in place but as you can see 4:30this setup doesn't scale down to a phone 4:32break point at all so let's go ahead and 4:36fix that first let's select our 4:38navigation and turn this into a 4:41component here we can create a 4:44navigation variant that we can also then 4:47use on the phone breakpoint I'll create 4:51a second variant I'll call it phone and 4:54I'll set width to 390 which is the 4:57default phone breakpoint width in 5:00framer then let's go back and actually 5:03set this variant to the phone variant 5:06and let's also set height to fit content 5:09here knowing that we'll be able to 5:11create a menu that expands and collapses 5:16and thus changes in height so let's go 5:19back into the component here and 5:21actually design the basics of our phone 5:25layout I'll resize the height I'll flip 5:30the direction of the phone stack itself 5:34and I'll do the same for the stack 5:37containing all of our links setting 5:39distribute to start as well now we 5:43really need a menu icon that can close 5:46and expand our 5:48menu so let's go to the assets panel and 5:51drag in the menu icon this is one that I 5:55have prepared but it's super simple it's 5:58just two Fram frames that get rotated in 6:02the second 6:03variant so I can drag this into the 6:07primary 6:09one and then we really need to group it 6:12with our little logo here so I'll select 6:18both wrap them in a 6:20stack and then I'll hit fit content 6:24again and then we can set visible to no 6:27on the desktop version 6:30as we don't need this icon on desktop so 6:34let's name this layer the top layer just 6:37to make it a bit easier for us to 6:39understand this one we want to set width 6:42to 6:43fill we can now bring back our menu icon 6:47and we can set distribution to space 6:51between to stretch it 6:53out we can then also set padding to zero 6:57on the phone variant and add 20 pixels 7:01of additional left padding on this top 7:05layer I'll set this one to 64 pixels 7:09just to ensure the height matches with 7:11the desktop height 7:15perfectly and now things are starting to 7:18come together we do still have a little 7:21bit of a problem in our 7:24setup and that is that on desktop we 7:26have this trigger with a drop- Down menu 7:30but on mobile it doesn't really make 7:32sense to reuse this same trigger as 7:35there is no such hover interaction but 7:38we would like to reuse the links so we 7:41don't have to define those twice or edit 7:44them into two separate places later on 7:47so with the drop- down menu selected 7:51I'll turn that entire layer into a 7:54component and we should make sure we 7:56give it an appropriate name so we can 7:58recognize it later on and here we can 8:02also Define a default variant and design 8:05a version to be used in our phone 8:08breakpoint or in our phone variant 8:11within the navigation component so I'll 8:14change the fill color to match remove 8:18the radius I'll remove the Border let's 8:21also remove these icons and add a sub 8:24label here I'll quickly use an existing 8:28text St for 8:31this now I'll delete the 8:37icons and let's make sure that these are 8:40a bit taller as they're designed for 8:44mobile and then let's tweak the Gap and 8:47padding here as 8:50well and finally I can add a bottom 8:54border to the topmost links 8:57here and and there we go that's starting 9:00to look like a proper mobile list so 9:04let's go back to the 9:07navigation our drop- down menu now is a 9:11component the one we just 9:14created but we also have our trigger 9:17with its drop- down menu on phone so 9:20let's delete it from there and then 9:22let's just also drag in the links 9:26directly onto the canvas here this 9:29doesn't do anything for the actual 9:32navigation but it's very useful for 9:34ourselves to quickly jump back into with 9:38I will duplicate this instance 9:41here and then switch to the phone 9:45variant and this one we can actually add 9:48to our list of links set width to fill 9:53and there we go instead of showing these 9:56links on Hover like we have on desktop 10:00these same links are now directly 10:02visible within the phone 10:05menu let me quickly rename this stack to 10:13links and we can add a bit of padding to 10:16the left and right sides here and tweak 10:19the Gap not all of our links have drop 10:23downs so any inline link we can now also 10:26update just to match the styling on on 10:29the phone variant 10:31here so I'll select all of these holding 10:35shift and then let's set width to fill 10:39height to 56 10:41pixels I'll set the phone variant to 10:48fit and then let's go back and set the 10:51vertical align to Middle here as 10:54well there we go I'll add some padding 10:58to the bottom of our phone variant here 11:01this is useful when dealing with 11:03viewport height on mobile to account for 11:06things like the dynamic address bar next 11:10I'll hit F to draw a new frame and we 11:13can turn these into little separator 11:15lines with width set to fill height to 11:18one and fill to a dark gray color next 11:22we can drag them onto our links stack 11:25give them a name and then I'll duplicate 11:28it a few times 11:29and I'll move it down each time to 11:31separate our inline links now this is 11:35starting to look like something but we 11:37really only have one drop down let's add 11:40a second drop down for our resources as 11:44well I'll head over to the assets panel 11:48right click on our links and I'll hit 11:51duplicate and I'll rename it to 11:54resources 11:56here so now we have a second compon 11:59component with all of the same 12:01Styles I can update the subtitle and 12:05then I can change the links here so we 12:09can add a few different ones like blog 12:11careers maybe 12:14docs then back in our navigation 12:17component we can drag it from the assets 12:20panel onto the canvas here just to make 12:24sure we don't forget about it and can 12:27access it quickly 12:29and we could even add more links right 12:32they don't have to be three this is why 12:34we often have height set to Auto or fit 12:38content so I'll add two new items this 12:41one I'll call 12:43tutorials and I'll grab this one and 12:45I'll call this one templates now I see 12:49that the order got a little messed up on 12:51our phone variant because of what I just 12:54did so we can manually change the 12:56Sorting to match here 13:00and then I miss a bottom order so I can 13:04rightclick copy style and then I can go 13:07to the docks item right click and hit 13:11paste 13:12style we could have also right clicked 13:15on the phone variant and selected reset 13:18order overrides this just does it for 13:21you automatically matching the order of 13:23the primary variant so let's move the 13:27sublabel back on top we're all good on 13:30the order here so let's go back to our 13:35navigation and we can delete the old 13:38resources label duplicate our product 13:42item with a drop- down rename the title 13:46to 13:47resources and then we can go over to its 13:51drop- down menu and replace it with our 13:55resources links and this keeps all of 13:59the relative overlay settings intact 14:01like it's positioning and the appear 14:04effects so we have our drop- down menu 14:07in place on desktop let's also make sure 14:10we can reuse these links on the phone 14:13variant we no longer need this separator 14:17because resources is now a drop- down 14:20and not an inline link so let's delete 14:22it and head over to the assets panel and 14:25bring in our resources links 14:29let's switch it to the phone variant 14:32I'll again set the width to 14:35fill and there we go here we actually 14:39have an additional bottom border that we 14:42no longer 14:44need and that is looking more like it so 14:48let's go to the homepage and give this a 14:52preview to see what we have so 14:57far so we have two little drop downs 15:01here and on resources we actually kind 15:04of broke our links so let's go back into 15:08that component and I'll quickly add a 15:11link to framer dcom for each navigation 15:14item and we only have to add these links 15:18onto the primary variant the phone 15:21variant will inherit these 15:24changes and there we go now we have 15:27links in our resources drop down as well 15:31our phone breakpoint is still broken 15:33though we only have this expanded state 15:36to which it's now set by default so it's 15:39time to work on our expanding and 15:41collapsing 15:43interactions for this we'll need two 15:45variants so I'll select the phone 15:48variant and create an additional one 15:51based off of it let's call that one the 15:54phone open 15:56variant I'll quickly sort my layers 16:00here and let's update the menu icon 16:04States and then I'll select our top 16:07stack and I'll drag a new interaction 16:10link from it to the phone open variant 16:14and vice 16:18versa so now we can tap on our little 16:22header here to switch between these two 16:26variants next I'll select the the links 16:29stack and set the opacity to 16:33zero and then we'll select the phone 16:36variant itself and we can actually 16:38remove the Gap value from both of these 16:42I don't think we need it but mostly we 16:45want to set height to 16:4764 and remove the bottom padding and 16:50also set overflow to Hidden so now we 16:54have a proper collapsed State the 16:57expanded State however we want to make 17:00sure always occupies the entirety of the 17:03viewport but never exceeds it because 17:05then we can make sure that it becomes 17:07scrollable so I've set both Max and Min 17:11height to 100 VH next I'll set overflow 17:16to scroll and I'll add an over scroll 17:18property as well which is set to contain 17:21by default this makes sure that when 17:24there are enough navigation items you 17:27can scroll the navigation and it doesn't 17:29scroll the page behind it so now we have 17:32all the building blocks in place we have 17:35these reusable link components that are 17:39used as relative overlays or drop- down 17:41menus on our desktop 17:46variant these links can be edited and 17:49customized and they'll be updated across 17:52all your break points as these same 17:55links are used on the phone variant 17:59and are just surfaced in line now that 18:02would have been a lovely ending to this 18:04video but I just noticed that the 18:07developer's item is still in the wrong 18:09place it should really be below 18:11resources and not below product so let's 18:15go ahead and fix that because we're 18:18animating between these two states we 18:20always want to make sure that the order 18:23matches exactly otherwise we'd get 18:26unwanted animations between these two 18:29layers so all we need to do here is move 18:32the developer item and its separator one 18:35layer down which I can do using the 18:38arrow down keys and then I'll do the 18:41same thing in the phone 18:44variant so now the orders should match 18:48again and the developer item is below 18:51resources one final tip is that you 18:54might want to remove the Border here on 18:56the phone open variant 18:59so it will fade out as the menu expands 19:02and you're not stuck with a bottom 19:03Border in its expanded state if we 19:07preview this you can see our mobile 19:10navigation is working and animating 19:13nicely and our drop- down menus are also 19:17working on desktop plus our navigation 19:20is responsive as it switches to the 19:23phone variant on the phone 19:26breakpoint and that's pretty much it for 19:29this video thank you so much for 19:32watching I hope it was helpful and stay 19:35tuned for more videos coming 19:47soon

TeachesComponents Stacks

Also coversAppear Effect Breakpoints Component Variants Custom Cursors Frames Hover & Press Keyboard Shortcuts Links Min & Max Sizing Responsive Design Sizing Spacing Templates Transitions & Easing

Watch on YouTube ↗

‹ The Framer October Update

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