Framer Tutorial: Creating Dropdown Menus

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to take advantage of the new relative overlays feature in Framer. I'll show you how to build dropdown menus and tooltips for your website within seconds. With the help of this video, you'll understand the difference between fixed and relative overlays and you'll be able to create awesome dropdowns without writing any code.
Remix the file: framer.university/resources/r...
0:00 - Introduction
0:35 - What is a fixed overlay?
2:07 - What is a relative overlay?
2:25 - Creating a tooltip with relative overlay
6:42 - Using pre-built menus
7:56 - Appear animation for relative overlays
9:10 - Old way of building dropdown menus
10:00 - New way of building dropdown menus
12:53 - Using relative overlays within components
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

[@reymiahthesun]

Love the new update.
Great job as always, Nandi.
My regards to the framer team.

[@framer.university]

Thank you so much!

[@mortezaajidanpour9381]

by far one of the best tutorials ever, keep going man, you're the best

[@framer.university]

Really appreciate you man 🫶

[@wossun360]

Hablo español y en mi idioma nadie enseña Framer pero tú eres tan profesional y enseñas tan bien que no me molesta para nada los subtítulos para aprender paso a paso, pero seguramente tendrías a toda la comunidad hispana que va creciendo cada vez más viendo tus videos en tu canal. Quizás en el futuro lo hagas con alguna IA. Gracias por tu gran aporte amigo 👍

[@framer.university]

Supper happy to hear this!
I'm glad that at least you can learn from my videos with auto generated subtitles. :)

[@willm3102]

Relative overlay is a lovely addition to framer! How do you suggest we update the drop-down option after a user has clicked it? Is there a smart way to do it?

[@writersnoise]

You should do a video on how to you setup the camera and lighting to do these videos 😊

[@framer.university]

Sorry but that’s not that main profile of the channel.
I am happy to help you in Twitter DMs tho.

[@StyleViewStudio]

Brilliant! A real game changer! Thank you - thank you - thank you! I’m beginning to love framer…❤

[@framer.university]

Good to hear it 🫶

[@carlitosbuendia]

¡Grande hermano! muchas gracias por todo tu contenido, buena explicación paso a paso aunque sea con subtítulos en español es suficiente, Bendiciones y éxitos siempre.

[@framer.university]

Thank you for the kind words! I am glad you liked it :)

[@BoburMavlonov]

great explaining

[@framer.university]

Thank you!

[@BillYouArent]

Would love to be able to use this functionality for elements like doodles, illustrations, or other complementary images that need to be attached to elements (like a highlight underline on a word). I use absolute positioning and it's always tough to make it stay in the right spot as I size down responsively.

[@framer.university]

Try using the layout pins when utilizing absolute positioning.

[@lyon-bo8qr]

sometimes when I hover nothing happens :(

[@gaborszalay6669]

Szia Nándi, ez is egy hasznos videó, (mint a többi :). A vége felé bemutatod a beépített dropdown menüt, amivel kapcsolatban azt kérdezem, hogy a lehulló relative overlay egyes menü elemeit hogyan lehetne linkelni az odal szekcióihoz? Nem látok erre megoldást, hiszen meg sem jelenik a scroll section felület, csak az oldalt lehet linkelni (home, stb).

[@framer.university]

Szia! Koszi!
Ha pl a Home pagen vannak scroll sectioneid akkor linkeled a home-ot es akkor ki fogja dobni a lehetoseget hogy valassz sectiont.