Interactive elements on a horizontal scroll tab bar

Hello,

I have a horizontal tab bar menu, which is interactive itself: when you click on the various tab titles within the tab bar menu, the specific title you click on should underline in white.

What I want to do, but I’m not sure is possible, is to be able to have the tab bar menu stay interactive as it is, but certain titles when clicking on them will take the user to the screen associated with that title. Is this possible or not? If not, is there a way to “hack” this to make it look like you can do this in prototype mode? Thanks.

If you already have triggers internal to your component (the horizontal tab bar), you can add additional triggers in two ways, but each have the same drawback, which I think is a bug.

1 - Add another trigger to the same element in the component other than the initial trigger (e.g. Tap > Change to + Touch up > Navigate to)

2 - Add another trigger to the same element in the instance on the parent frame (note “Variant interactions” section because the new trigger is not internal to the component)

This will also let you choose Tap again, but the internal variant will be ignored (black icon to the left of “Tap”)

You will also see “After delay” which is optional and enabled from the icon top right. I thought this would be integral to letting the internal variant interaction finish first, but I guess it doesn’t matter which I think is the bug because I have never once been able to get that variant interaction to actually work independently despite all this.

More about adding triggers here:

2 Likes