Build a professional navigation with dropdown menus that works perfectly on desktop and mobile. This tutorial walks through creating reusable components, responsive variants, and smooth interactions using Framer's Relative Overlay feature. You'll learn how to structure navigation items, create hover states for desktop, design expanding menus for mobile, and make everything fully reusable through Framer's component system. Find the final demo and more navigation examples at https://nav.supply/
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 the first Dropdown
4:36 - Creating a Navigation Component
4:50 - Creating a Navigation Phone Variant
5:18 - Editing the 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 - You did it!
Topics covered: responsive design, website navigation, web development fundamentals
🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x
