Prototype navigation menu with multiple dropdowns?

Could you explain what your layer hierarchy looks like?

Hi, I have edited this post because I actually sort of solved it but also messed it up in a different way… I updated the post and have a link to figma file for an example

You can separate the drop down from your component and open it using this interaction:

Although it will require two clicks on another label, since the first one will only close down the overlay.

@Avokadomos The issue with having an overlay is the menu is being used in various places in different pages and files so I would have to have the overlay on every page and redo that prototype interaction each time. That’s why I made it a variant rather than an overlay. Unless there is in fact a way to have an overlay interaction apply across multiple pages and files?

If your navigation bar is a component, and you apply the interaction to the component, it will update across all frames where the navigation is used.

@Avokadomos Unless I’m using it incorrectly though, it doesn’t apply across other pages and files, only on the page where the overlay lives. The interactions apply everywhere when it’s interactions between variants because it’s part of that component, but not when it’s just an overlay interaction.

I’ve made a demo that shows how to make the navigation interaction persist between frames. You can inspect the design file.

Any interaction you add to the main navigation component will persist in instances across frames.

So, I think I encountered something similar recently. I was wanting to show what would happen if someone opened a drop down menu. I made it a component so that the menu would be out of frame but still rendered. In the component, I have a fixed height for only the button to open the nav and then the drop down is below it still within the component frame. It is important here that you don’t clip content for the component. Unfortunately it appears that this does not work in auto layout (I swore I had got it to but maybe I remembered incorrectly). So what I did do is that the section it was in, I took out of auto layout. Again, do not clip it. The absolute location should keep from other frames covering the list.

Made dropdown component with variables https://www.figma.com/community/file/1256660046319231869