How should I prototype a multi-level, overlay, hamburger menu?

[Cassie_Barden]

I’m new to Figma prototyping and am stuck on this multi-level hamburger menu. The behavior I want is: click menu, first level slides in from the left. Click a category, second level slides in from the right, moving left. Click back, everything slides back. Seems simple.

In the first prototype I used overlay and swap overlay, with the move-in/out animation. The “back one level” action didn’t look right, but it did the job for testing purposes. But for the final demo, I want to get it right.

First I tried the sliding from category to subcategory and back again using masks.

That behavior is exactly what I want, but when I try to turn it into an overlay, it gets a weird hitch after I click “Leather Goods”. In addition, while the first menu level is an overlay, because I didn’t use Swap Overlay for this version, the background page disappears and you lose the ability to close the menu by clicking outside.

Any advice about how to prototype this?

[Gleb]

Swapping an overlay is definitely the correct approach here, but you need to use Smart Animate to make it look right. I think that would be similar to your mask method in terms of how things are structured.

[Cassie_Barden]

Cool, thank you! I’ll stick with swap overlay, and see what I can do with Smart Animate.

[Cassie_Barden]

I got it! Thanks @Gleb! I went through a tutorial to actually learn how SA works (matching layers etc) but I used the same masking as before but was able to keep it an overly. This is exactly what I wanted.

[Gleb]

Awesome! Glad to help!

[Jonny_Bennett]

I am working on a navigation very similar to this right now but I can’t seem to figure out how to get the top section (where you have the Home and search input) to remain sticky as you navigate between levels. How did you achieve this?