Hamburger Menu Items as ANCHORS - Is THIS Possible in Figma? (Click to Scroll Down)

In this video we’re going to try and set hamburger menu items as links to anchors on one, single, long page in Figma. Is this possible? We’re going to find out.

In this video, I'll attempt to upgrade a functional hamburger menu prototype in Figma by connecting individual menu items to anchors on a single page. Is it possible to turn menu items into links that smoothly navigate users to specific sections of your design, enhancing your prototype's user experience and making your designs more engaging? We're about to find out! We'll explore Figma's prototyping features to see if we can create seamless navigation within a single page layout.

This tutorial is perfect for designers of all skill levels who are curious about pushing the boundaries of Figma and experimenting with new techniques.

how to set up anchors in figma – click menu items to scroll down in figma – mobile hamburger menu items as anchors

————————
© 2023 Mavi Design

[mavidesign]

There seems to be a solution to the "menu not closing after clicking" problem: you have to set the scroll interaction on "Mouse down" on the INSTANCE level and then go to the "header" component where you set "Mouse up" to change to the "closed" variant on all the section buttons. Also, for some reason the scroll interaction is not working when you set the "Animate" type. You need to select "Instant". Also important to set the component state change interaction on the component level (not the instance level).

Big thanks to Jono Young for suggesting this solution!

[justjunnnt]

Thank you very much! This is exactly what I need! Awesome tutorial

[juhbr]

You saved my presentation for tomorrow! Thank you much!

[lanenaamorcita]

Tnx Mate you saved my day! I'being looking at how to solve this puzzle! You have valuable content!

[drcxfws]

I'm so grateful for this video!!! I was annoyed all day by no function... This is just no video about this on slavic youtube. And also thanks me for knowing english anyway

[ericaleman]

You could try making the section buttons in the component instance Ali’s lead back to the closed menu like the x button does

[loomonda]

You addressed the problem I was having (with the component section not being able to link to the individual elements on the page), but my issue is how to combine an effect (ex changing colour text when clicking) WITH the single page anchor links....having a very hard time with this

[kylequinn]

This is a very helpful tutorial! However, I am still running into another issue when using this design. While I want to use the hamburger menu to act as an anchor to scroll to specific elements on screen, I also have other frames that the hamburger menu navigates to.

In my menu, I have multiple elements that navigate to different parts of my design. Some of the menu elements act as anchors to sections of the current page its on, while others navigate to a different frame. However, when I navigate to a different frame, and want to navigate back to the pervious page where the anchored element exists, the link to the anchored element is broken because now I am on a different frame and cannot scroll to it. *Is there a way to allow elements to have the "scroll to" feature when that section is on the page, and then that same element have a "navigate to" feature when show on another frame?*

[kaifabdullah]

hey, I want to open a new page with a button and it should automatically scroll to a certain section of that new page. Could you plz guide how to do that.

[WePiphany]

Can you add a delay after each scroll click interaction that closes the menu overlay?

[desventurasdati]

Very nice video! Thank you for sharing.
To close the menu after click we can use the interaction After delay

[ShinAtRod]

When I put my variant to "close" and open the preview its not working anymore, but when i let it as "open" it does work. So that means everytime when I open the preview, the menu is always opened at the beginning. How can i set it as closed and it would still work? PS thank you very much for this tutorial! It helped a lot!