I’m in the process of building a cascading menu component for our design system, with the aim of delivering something that can be used in prototyping.
When hovering a menu item that has subitems, those items should open as a cascade. In the example screenshot, the trigger item is “Melons”. This is difficult enough to prototype – if the top-level item is set to trigger the cascade while hovering, it will obviously close the moment the user moves the mouse over to the subitems. As a workaround, I’m using an overlay with a copy of the top-level item. The overlay opens on mouse enter on the trigger item and closes on mouse leave on the overlay itself.
What I haven’t found a workaround for is how to deal with the resulting hover area. Hover entry and exit should correspond to the green area; however due to how frames work in Figma, the red area becomes part of the hover zone as well. This obviously won’t do, since it means that once you’ve hovered over “Melons”, you won’t be able to hover or select any of the other items until you’ve moved your mouse away entirely.
In my mind, the easiest fix would be irregular frame shapes; since those don’t exist I’m wondering if anyone else has any pointers? In the past I’ve used 0% opacity shapes within a component set to simulate the hover area, but that’s too hacky and imprecise to be sustainable.
Hi Kurt, thanks so much! It absolutely does work, but I’m only half sure I understand why.
I initially thought I had recreated your example precisely, but mine flickered while yours didn’t – the moment the cascade opened, the mouse had technically already left it, prompting it to close and then open again rapidly. Finally I saw you set an empty conditional as a mouse enter event on the trigger item. As soon as I did that, the flickering stopped. It seems as though setting a mouse enter event on the same variant prevents the mouse leave event from triggering immediately. How on earth did you figure that out?
I think that the issue you might have had was setting the mouse enter and leave to the same section “Melons” whereas I set the mouse leave to the side menu.
I did this because the mouse would enter the first frame and then slide over to the side menu, so the first frame has no leave function so it wont react and the side frame would only close if the mouse is not highlighting the first frame (mouse enter) or if the mouse isn’t interacting with either
I would have thought the same, but the deciding factor is that empty mouse enter conditional. In the file you uploaded, try removing it and viewing the prototype again. It starts flickering as soon as the menu is triggered.
@Kurt_Ferriday1 Hi, could you send me a link to your file? It’s not available anymore and I’m currently dealing with the same issue that @Vincent_Schlothauer described.
