Interactive components: How to navigate to another Frame?

Ask the community
1

So I’m playing around with this demo file:

I’m trying to make it so that when dropdown item 2 (i.e. employee) is selected, the prototype also navigates to another frame.

But I’m not seeing how to do this. Anyone know what the trick is?

2

After digging a bit more:

  1. Seems the interactive component needs to be in the same page as the frames
  2. It seems impossible to have two of the same types of interactions, i.e. OnClick > ChangeTo , and OnClick > NavigateTo

Would love to know if anyone can figure this out!

3

This is not possible to do in a single frame with the current features available!
However, you can use a hack that is to have multiple buttons matching the same number of dropdowns and place it inside the same interactive component.
For example, if there are 3 dropdown options then have 3 button with 3 different navigations.
So in variant 1 you have 2 buttons hidden and 1 button visible… then in the second variant have the next button visible.
This is not an ideal solution but just a hack!

4

Thanks for the idea, I’ll give it a shot! So basically:

  1. Three interactive dropdown components (nested inside each other or just grouped?), in frame1. Show component 1 and hide the other two
  2. When you select item 2 in component 1, it shows component 2,
  3. Then click on component 2 and select item 2 again, which navigates to frame2 as the onclick behavior

Then to “get back to frame 1”:

  1. In frame2, have another 3 nested components, with component 2 showing and the other two hidden
  2. When selecting item 1 there, it shows component 1
  3. Click on on component 1 and select item 1 again, which navigates back to frame1.

Is that right? The odd thing is that you’d have to effectively select the same dropdown option twice in order for the navigation to happen (unless I’m misunderstanding it).

5

I’m not sure if I got your requirement correctly but here is a quick prototype of how I visualized it.
figma. com/file/dVckxzYwBJgXPQPjX9di6C/Dropdown-Actions

1 Like
6

Thanks for doing that! I was also putting together something similar, but yours will actually serve great as a base.

So the requirement is to automatically navigate to the other frames when the respective dropdown menu item is selected. In your prototype, it would be the equivalent of clicking on the “Next” button, but automatically. I feel like this should be possible to do (but perhaps it isn’t).

I’ll finagle around with it some more, based on your prototype. Thanks again for putting it together!

Anyhow else interested in figuring this out, feel free to give it a shot as well :slight_smile:

7

Ok I am getting close:

Navigate-to-Frame-v1

But notice that if you’ve chosen an option and choose it again, the dropdown stays open and the expected behavior breaks. Hm…

8

Directly taking a user to another screen on dropdown selection is not a proper UX for the user.
Anyhow, I’ve tweaked it a bit. Go and check the prototype in the second page!

10

Well it depends on what is in the frame :slight_smile:

I updated the prototype to better illustrate the intent (using an example of using the dropdown to switch between different UI modes).

The dropdown still isn’t closing the second time you click on a given dropdown item.

But now at least when mousing out of the dropdown, it closes. I wonder if there is a bug here, because the first time you click on the dropdown items, the behavior is correct.

11

Oh… my bad I did not get the flow initially! :sweat_smile:
Anyways If this was the UX you wanted then we are unnecessarily complicating it with interactive components you can just use an overlay!
Check this :arrow_right: figma. com/file/kMZkKAFkuNM8XqCYmbrcYq/Dropdown-Actions—Navigate-to-Frame-v1-(Community)

12

No worries :slight_smile: Ah yes, good point! Thanks for putting that together to illustrate it.
Well ultimately I was looking to get the more realistic feel of the interactive component (with the highlights on hover, etc), and more importantly be able to “componentize” dropdown menus as part of a design system. But perhaps this can be done with “componentized overlays”? At least with the overlays we don’t have the issue with the menu not closing, which seems like a bug to me.

1 Like
13

Hi @SLT-UX , may I know if you managed to get this working? I am also trying to create a prototype of a NavBar with dropdown items. The effect of changing the variant works perfectly, but I want to navigate to another frame when the user clicks on one of the items in the drop down menu. The ‘dropped down’ view only appears in my variants (and not on my main frames) so I tried to add an interaction to navigate to a frame from a variant, but it seems the behavior is not consistent.

14

Hey @Fabian_Koh - Unfortunately not. There appears to be a bug with the menu not closing… :frowning:

1 Like
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.