Contextual Save Bar

Built for Shopify
1

I’ve been updating my app to handle the latest contextual save bar correctly (Save Bar).

One requirement is that it should not be possible to navigate away from a page when the save bar is active. When you click items in the navmenu it triggers an attention grabbing animation on the save bar - I’m wondering how I can replicate this for my own links inside the page? I don’t see any reference to the animation in the docs.

2

Hey @Timothy_Daniell :waving_hand:, at the moment, it’s not possible to manually trigger the CSB animation, but I believe it should trigger automatically per this little bit of info in the docs:

It is automatically configured when you provide the data-save-bar attribute to a form element and will display the save bar when there are unsaved changes. The submit event fires when the form is submitted or when the Save button is pressed. The reset event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form.

Though, I believe that this only occurs when users have unsaved changes within form elements. Otherwise our reccomendation is to use the ui-modal component: ui-modal

I did a quick test on my end here in the admin UI (trying to navigate from an order edit process to a different link in the navmenu, and I didn’t actually see the CSB trigger. Could you let me know where you’re encountering that behaviour (if you’re able to share a video, that would be super helpful!). More than happy to do some digging into this to confirm expected behaviour and to see if we can put through a feature request at the very least for you. Hope to speak soon!

3

Thanks for the reply Alan!

If in the admin you go to a product and edit a field the CSB will show. Then trying to navigate in the left nav it won’t let you and it’ll do the animation. That’s the same in my app.

On the product page there is also a link (“adjustment history” in the inventory section) that does the same thing - which is what I want to do.

But with my in-page link in my app I can either prevent the navigation (then there is no animation) or allow the navigation (then there is an animation but the navigation goes through which is bad with the CSB still showing from the previous page).

So basically I’d like to be able to trigger that animation from js.

4

I have read in another thread (https://community.shopify.dev/t/how-to-block-navigation-and-trigger-shake-animation-using-contextual-save-bar-in-shopify-app-bridge-react/16907/15) that it should be working automatically. So I wonder if there are particular types of links that do or don’t work.

5

I’ve found a workaround to manually trigger it. But it would be good to understand how it’s supposed to work. I can see a lot of other threads on this topic.

6

Hey @Timothy_Daniell, thanks for following up on this. I’d be interested in the workaround you found there, would you be open to sharing what you ended up doing? My understanding is that the CSB animation can’t be triggered manually by apps, so I just wanted to take a look at your setup to confirm expected behaviour as well.

Just want to understand your setup here so that we can confirm the best path forward. If you’d prefer to chat over DMs, just let me know in this thread and I can set that up on my end. Hope to speak soon!

7

Sure if you DM me I’ll send you the code

8

Thanks @Timothy_Daniell - DMing you now. Speak with you there in a moment :slight_smile:

9

@Timothy_Daniell, is this the experience you’re looking for?

Screen Recording 2025-07-24 at 16.09.18

If so, here’s the code I used:

import type { LoaderFunctionArgs } from "@remix-run/node";
import { Page } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await authenticate.admin(request);

  return null;
};

export default function Index() {
  return (
    <Page>
      <TitleBar title="Remix app template"></TitleBar>

      <form data-save-bar>
        <input type="text" name="name" />
      </form>
      <a href="shopify://admin/products" target="_top">
        Products page
      </a>
    </Page>
  );
}

References:

1 Like
10

Thanks Bill. Does that also catch the browser back button, and work for internal app links? I’m using BrowserRouter.