Figma Support Forum

Can I navigate to a new page using an interactive component state?

I have an interactive component that has a base state and a hover state.
I would like to be able to click on the hover state in my prototype, in order to navigate to another arbitrary page.

Is this possible? I can change the state of the component (to hover) in my prototype and connect it to another page, but when I switch it back to base, and then try out my prototype, that doesn’t actually work.

Create your component with internal states, eg:
default --while hovering–> hover --while pressed–> pressed
Then just put it on a frame/screen, and add an on click interaction that goes to your desired frame (there’s no need to apply the onclick to the hover state, just the default will work).

1 Like

I tried this and for some reason, the on click event stops working once I have hover at a lower level in the component. I tried it with hover and mouse enter / leave. Screenshot 2021-03-27 at 18.49.34 This is how it looks on the Prototype tab. When I remove the hover or mouse enter interactions, the on click works. It’s like the underlying hover interaction prevents or takes precedence over the on click. Any idea what I might be doing wrong? Thanks.

Try using “while hovering” rather than the mouse enter interaction? I’m away from my computer at the moment and can’t test it, but that’s the setup I usually use. Other thing might be to change the instance of the component to the mouse enter state in the design, and apply the on click event there. Shouldn’t make a difference, but this is a beta so you never know :slight_smile:

1 Like

Thanks Shane. That’s helpful. I changed it back to ‘while hovering’ and I noticed that there was an additional “change to” event that was triggered by an “on click” by mistake. So I cleaned that up and it works now. Tx!

1 Like