Toggle Menu

Learn more about Toggle Menus

A toggle menu is compact menu that opens after a menu icon is clicked. The goal of a toggle menu is to be out of the way, so the contents only take up space when the user needs to see the full menu. The menu links are typically buttons.

When creating a toggle menu it is good practice to use a well-known menu icon. This way, users know the action of the button they are clicking and the menu itself is easy to find.

How to make one in Framer

In Framer you can use Magic Motion to mock up different states, this is perfect for creating a toggle menu interaction. Create a screen using the Frame tool, this will be your initial state. In the initial state you will create your closed menu icon. Then, copy and paste the frame and adjust the properties to create a second state.

In your second state you will have your open menu icon with menu content. Next, use the prototyping connector to link the two frames together and set the transition effect to Magic Motion to automatically animate between the states.