a blog on prototyping by pidoco°

Especially in mobile applications hamburger menus are used to display additional content. Even though expert opinions might differ, the icon consisting of three stacked lines on the very left or right corner of a page can be found in many apps and is still industry standard. That is why I want to show you today how you can create such a hamburger menu, combine it with layers, and make it interactively slide in and out. And here is how it goes …

1 Select the hamburger icon

Let’s start creating a page where the hamburger icon can go to. To do so and to save you time, just use the stencil search atop the palette, type in “hamburger” and drag and drop it to the desired position.

Adding the icon menu using drag and drop

Since the menu is supposed to be slideable, we will work with layers. That is why we build the frame on that page and only add the content that is the same on every page of this project. (Here: In my project “Slide hamburger menu” I called the first and only page “Start Page”.)

2 Create layer

Now we build the menu. To do so, open the layer panel and click on the “+ new layer” button. To facilitate your work and to have a perfect overview, it’s better to rename the layer.

Adding a layer via the My layers panel

The next step is to fill that layer with content. To do so, make sure that the layer is toggled and highlighted in green in the panel. Editing now works like always, so just add your elements to the canvas. As it is a slide menu, you can e.g. use a rectangle with a smaller width and height than the actual project page has and add some text representing the menu entries and the content to be linked.

Creating a slide menu on a layer

Since we need a start page to be displayed as well, just create another layer and add the content to be displayed there. (Here: I called my layer “Start page”.)

To add content to the other layers, repeat that process.

3 Arrange layer order

As the menu should always be in front of every other layer, make sure that it is listed as the first layer in the layer panel. To arrange the order, simply use drag and drop and move the menu layer to the right position.

Arranging the order of the layers in the interaction panel using drag and drop

Note: If a layer is toggled, it will be displayed in the Simulation View. If you don’t want to show it, untoggle it.

4 Add interactions

The last step is to add interactions to the project to make the menu slide in and out and to display the corresponding layer.

4.1 Add interactions to the menu icon

To make the the menu slide in, let’s go back to your first page. Open the context menu of the hamburger icon and go to the interactions tab. The interaction pairing needed here is a click action and a change of the layer visibility. Select the corresponding layer from the dropdown and use the visibility “toggle” such that the menu appears and disappears upon a click on the icon.

Adding an interaction to the hamburger icon to make it collapse

4.2 Add interactions to the menu entries

Now we need to make the menu list entries interactive. To do so, select your menu layer in the layers panel at the right, open the context menu of the first menu entry and go to the interaction tab again. (Here: I used an icon and text and grouped it by selecting it and clicking on “Group elements” in the context menu.) Choose the reaction “change layer visibility”, select the layer to be displayed from the dropdown and set the visibility to “show”. Since only one layer should be displayed if you click on a list entry of the hamburger menu, we need to add more system reactions, because all the other layers should be hidden. So, we click on “Add reaction” and add another reaction for the other list entries. This time, we set their visibility to “hide”.

Adding interactions to the menu entries

You can also add interactions to the content of the layers. To do so, just repeat the previous steps and make sure that layers don’t overlap in the Simulation View.

That’s it! You have successfully created your first slide hamburger menu!

Do you need help working with layers or menus? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!