How to create a hamburger menu on a mobile screen?

Plasmic Studio Questions
1

Dear ALL, are there any tutorial or article on creating hamburger menu on mobile screen?

  1. desktop design first, some menu items then all teleport into hamburger menu on mobile mode
  2. mobile design first, hamburger menu then some menu items shown on desktop mode
  3. desktop mode, menu item has sub menu items
    Thanks.
1 Like
2

+1

3

have you found a way to do this?

4

I second this !

5

I would also love to see an example, I looked through all the templates and it doesn’t seem that any of them do this quite yet.

6

This was already implemented a while ago. Just look in the insertion menu for responsive nav menu.

7

I just figured out how to do this, in case anyone else would like to use this method.

First, make sure your navbar is a component. Within the component, create a variant called “Expanded” and a responsive breakpoint for mobile. Design the mobile breakpoint as you want being sure to have the hamburger icon visible as a link.

Create two combination variants, one that is “Mobile Only” and another that is “Expanded and Mobile Only”. Start editing the “Expanded and Mobile Only” artboard but make sure you are editing with only the “Expanded” variant selected, the “Mobile Only” variant should not be selected anywhere on the page. I added a vertical stack under the hamburger menu with all the necessary links. This will change the Expanded desktop version but it’s fine as you don’t use that variant on the live site.

On your regular Mobile Only artboard, select the link containing the hamburger menu icon. In the Settings panel on the righthand side, go to Interactions. Add an interaction for “On click”, the action will be “Update variant” and the group will be “Expanded”.

Now just test your interaction to make sure it looks how you want.

Hope this helps! :slight_smile:

1 Like