Make A Responsive Navigation With Dropdown Menus From Scratch

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. 0:00 - Introduction 0:26 - Adding Text Layers 0:50 - Grouping with Stacks 1:13 - Designing a Trigger with a Caret 1:53 - Creating a Trigger Component 2:43 - Adding our first Dropdown 4:36 - Creating a Navigation Component 4:50 - Creating a Navigation Phone Variant 5:18 - Editing our Navigation Phone Variant 7:16 - Making Links reusable 9:09 - Adding Links to the Phone Variant 10:05 - Fixing Links and Styling on Phone 11:34 - Adding a Second Dropdown 15:04 - Adding Links to the Resources Dropdown 15:30 - Designing the Expanding Interaction 18:01 - Finalizing the Link Sorting 18:51 - Removing the Border from the Expanded State 19:06 - We did it! ? Try Framer for free: https://framer.com ? Follow on Twitter: https://twitter.com/framer ? Join Community: https://www.framer.community