This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.
Benjamin
19:48
Build a responsive dropdown menu in Framer
Build a responsive dropdown menu in Framer with Stacks, Components, Variants, and an overlay. This lesson starts with the navigation labels and trigger, adds open and closed states, and then adapts the layout for smaller breakpoints. You can customize the spacing, indicator, interaction, and menu content directly on the canvas.
Lesson details
In this Framer tutorial, you will learn Make Responsive Dropdown Menus From Scratch. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
Frequently asked questions
How do I create a dropdown menu in Framer?
Build the trigger from text and an icon, wrap the elements in a Stack, and turn the result into a Component. Add open and closed Variants, then connect the trigger to the menu state or overlay shown in the lesson.
Why use Variants for a dropdown menu?
Variants hold the visual states of the trigger and menu, such as the default and open states. They keep the icon, opacity, and layout changes inside one reusable Component.
How do I make the dropdown responsive?
Adjust the navigation and menu layout at the relevant breakpoints. Stacks can change direction, width, gap, and alignment so the same menu remains usable on desktop, tablet, and phone layouts.
Can I customize the dropdown indicator?
Yes. The lesson uses a small Component with separate Variants for the indicator. You can change its icon, rotation, size, or transition while keeping it connected to the dropdown state.
What should I check when testing a dropdown menu?
Confirm that the trigger opens and closes the correct menu, the content stays within the viewport, and the interaction works at every breakpoint. Also check keyboard focus and link targets before publishing.