Prototyping Arrow Not Connecting To Drop Down

Hello everyone … I have been following along with a Figma tutorial, and I am stuck at the prototyping stage. I have three pages, a home page with nav bar (pg 1), the homepage with a drop down menu (pg 2), and a home page with a hover state for the drop down menu (pg 3). I am trying to connect arrows from pg 1 to the nav item for the drop down menu. I am also trying to connect the menu item from the drop down on pg 2 to the hover state item on pg 3. The problem I am having is that after I connect the beginning of the arrow, the arrow will not penetrate the outer frame so I can not connect to anything inside the outer frame. I can only connect to the main outer frame. I have copied a link hoping somone can figure this out. If the frame is not working please let me know.

That’s right, connections only connect to top-level frames (except when you use the “Scroll to” action). And it will work as you would expect. That is:

  1. When you click on a menu item, navigate to Page 2 to show the drop down menu;
  2. When hovered over an item in the dropdown menu, navigate to Page 3 to show hover effect;
  3. Etc.

But this path is too cumbersome. The best way would be to create interactive components. Read more in the Help Center article:

1 Like

What is confusing is that the tutorial did not create interactive components but still connected the drop-down menus together but I will look into creating them. I’m super new to this and its definitely kept me confused.

hello Dominick, it has been a year, and I don’t know if you will see this. I have the exact same problem and we might even be following the same tutorial haha If you have found a way out of this, would you mind sharing? It would be very helpful as I have not found an answer anywhere else. Thanks a lot. hopefully you see this :crossed_fingers: