menu
up-caret
down-caret

Framer

Create interactive designs from start to finish. Try Framer for free.

# General

General chat

Trending conversations
What is the Popular Framework recently?
@whitedragon · 3h
FramerX and GitHub
@roogud · 2d
Component size defined by content
@dustinlocke · 14h
Link to a specific screen using hash
@slashdesigner · 37d
Copy and Paste...please give me a clue
@charlie-williams · 2d

How to create a drop down menu

Framer/General · October 8, 2018 at 1:15pm

How to create a drop down menu

October 8, 2018 at 1:15pm

Hi Guys,

I'm trying to build a prototype and was wondering what the best way would be to create a simple dropdown menu.

So click on icon and menu appears.

many thanks


October 9, 2018 at 6:54am

Good question! You need 3 things:

1. A place to store the open/closed state of the dropdown menu

2. A function that listens to the click on the dropdown trigger

3. A function that toggles the visibility of the dropdown options menu

That sounds complicated, but it's really not :) You only need 10 lines of code. Here's an example: https://drive.google.com/file/d/1Xc0JhXQhuuVAYT6TyTAfbbQJuFD2Ehj7/view?usp=sharing

like-fill
3
  • reply
  • like

Floris, thanks so much for the help here mate, it really helps out being able to look at what you have done and try to understand it.

  • reply
  • like

I'm happy to help, let us know if you ever get stuck again ✌🏻

like-fill
1
  • reply
  • like

h I'm sure I will :) Enjoying the learning curve, as I think Framer is definitely moving in the right direction.

like-fill
1
  • reply
  • like

October 11, 2018 at 1:17pm

Hay @floris quick one - do we have a short cut list anywhere for Framer X?

  • reply
  • like

Hay @floris quick one - do we have a short cut list anywhere for Framer X?

  • reply
  • like

I was looking for the Command 9 key, as I kept hitting Command 2 as per sketch but was getting nowhere...Many thanks.

  • reply
  • like

Quick one - you have zoom in and zoom out as Command -, you might want to correct that Jurre

  • reply
  • like

Ah thanks! will fix

  • reply
  • like

FYI (and not being picky) on tip Paste Style - Paste has been spelt wrong... ⌥ ⌘ V Patse Style. They do say the more eyes the better :)

  • reply
  • like

November 11, 2018 at 5:08pm

i was not searching for this, but i wanted to say thanks for supplying a working example Floris! As Charlie said, it is extremely helpful!

  • reply
  • like

November 12, 2018 at 3:47am

This link looks like it's broken. Is there a new one?

  • reply
  • like

November 13, 2018 at 2:26pm

This link looks like it's broken. Is there a new one?

like-fill
1
  • reply
  • like

February 5, 2019 at 8:01pm

Thanks for this awesome code example! Is there a way we can have the menu dismiss itself when you click elsewhere?

Edited
  • reply
  • like