Hi everyone, I’m building a Shopify embedded app using @shopify/app-bridge-react and I’m implementing the Contextual Save Bar (CSB) to handle unsaved changes in a form. Here’s what I’m trying to achieve: When there are unsaved changes (isChanged is true), the CSB should appear. Merchants must cl…

Hey @webplanex_info - happy to clarify some things. Just to clarify, navigation should blocked automatically and the shake animation is automatic as well. When users try to navigate away (click links, back button, etc.) while the CSB is visible, Shopify should shake the save bar to draw attention …

Thanks for the clarification. As mentioned earlier, we’ve implemented the logic based on Shopify’s documentation, and I’ve already shared our code above. However, we’re experiencing unstable behavior: Sometimes, the native “Leave page?” modal shows. Other times, it just redirects without any conf…

Hey @webplanex_info thanks for confirming. Taking a quick look here at the code, the only things I can see that potentially are causing the unexpected behaviour are the flag spelling for leaveConfirmationDisable (no “d”). It is a little confusing for sure, but there’s more info on this here: …

[image] Alan_G: Hey @webplanex_info thanks for confirming. Taking a quick look here at the code, the only things I can see that potentially are causing the unexpected behaviour are the flag spelling for leaveConfirmationDisable (no “d”). It is a little confusing for sure, but there’s more info o…

Hi everyone, I’m experiencing the same issue. I’m also using @shopify/app-bridge-react and the useContextualSaveBar hook, but I haven’t been able to get the expected behavior either. Specifically: The Contextual Save Bar appears correctly when there are unsaved changes, but it doesn’t block navi…

Thanks @webplanex_info for clarifying - that is definitely odd that it’s still not working as expected, I’ll do some digging into this internally on my end for you and @codeex to see if this is unexpected behaviour and loop back with you both in this thread once I have more info

Thank you for the update, @Alan_G ! We appreciate you looking into this internally. We’ll be happy to wait for your findings and will be ready to assist further if needed. Please keep us in the loop, and we look forward to your response.

Hii @Alan_G I’m also experiencing the same issue on my side — would appreciate any updates or suggestions once you’ve had a chance to look into it.

Thanks @fisico - we’re still looking into this on our end, but I will update you both here in this thread once I have more to share :slight_smile:

Hey @webplanex_info , @codeex , and @fisico - thanks again for your patience while we dug into this! After investigating with the team, I have some clarification on how the shake animation works. The key thing is that the shake animation is automatic - it’s controlled by the Shopify Admin and trigge…

How to block navigation and trigger shake animation using Contextual Save Bar in @shopify/app-bridge-react?

App Bridge

Alan_G June 19, 2025, 2:33pm 15

Thanks @webplanex_info - I really appreciate you sharing the video there. I’ll keep looking into this on our end and loop back with you when I have more info

Contextual Save Bar

Topic		Replies	Views
Contextual Save Bar Built for Shopify	9	411	July 25, 2025
Can any one know this [How to block navigation and trigger shake animation using Contextual Save Bar in @shopify/app-bridge-react?] App Bridge app-bridge	1	100	June 10, 2025
Contextual Save Bar shake with Web Components ui-save-bar App Bridge app-bridge	3	493	April 16, 2025
When the Contextual Save Bar is present, require merchants to interact with the "Save" or "Discard" buttons before allowing them to navigate away from the form. This prevents accidental data loss and ensures changes are handled appropriately. Should shak App Bridge app-bridge	0	63	December 9, 2025
Contextual Save Bar fails to block breadcrumb navigation - Built for Shopify compliance issue Built for Shopify	2	150	November 5, 2025

How to block navigation and trigger shake animation using Contextual Save Bar in @shopify/app-bridge-react?

Related topics