Issue with <ui-title-bar> breadcrumb navigation bypassing <ui-save-bar> protection

App Bridge
1

I’m using <ui-title-bar> in my app, and I’ve added a breadcrumb that lets users go back. Here’s the snippet:

<ui-title-bar title={ruleId ? "Edit Google Rule" : "Create Google Rule"}>
  <button
    variant="breadcrumb"
    onClick={() => navigate("/google-products")}
    type="button"
  >
    Google-Products
  </button>
</ui-title-bar>

The problem:

  • When the <ui-save-bar> is active (unsaved changes present), clicking the app icon correctly prevents navigation until the user saves or discards.
  • But if I click the breadcrumb button, I can still navigate back without being blocked — which should not happen.

How can I make the breadcrumb behave the same way as the app icon, so navigation is blocked until the user resolves the <ui-save-bar>?

bread
bread1357×581 34.5 KB

2

Hey @codeex :waving_hand:, happy to help look into this.

Just wanted to confirm, is the ‘Google‑Products’ breadcrumb the button inside in your screenshot?

If so, it’s likely doing an in‑app navigation, which Shopify’s unsaved‑changes guard won’t catch. Can you try using the leaveConfirmation method and letting me know if that works? If not, just ping me back here in this thread and we can take a closer look . Hope this helps! :slight_smile: