// URL: settings/general
<s-page heading="General Settings" inlineSize="small">
<s-link slot="breadcrumb-actions" href="/settings">Settings</s-link>
<s-section>
// Contents
</s-section>
</s-page>
When I try to click on settings breadcrumb link It did not redirect to settings page and does nothing
It acutally has to be a and not a for it to work. This should be documented somewhere though.
I am able to replicate this, and it’s impacting my app as well. You can replicate it easily in the react-router template. The code below does this:
Using <a> or react router Link does not work – it seems it has to be s-link to show the breadcrumb, but the nav is broken. @Anthony_Frehner
export default function Demo() {
return (
<s-page heading="Additional page">
<s-link slot="breadcrumb-actions" href="/app">
Home
</s-link>
Additional page content
</s-page>
);
}Hi all,
Thanks for bringing this issue to our attention!
I’ve added to our backlog to resolve, but not able to provide a timeline for when a fix will be out. I’ll provide an update here as more information comes available 
Hey! There should be a fix released for this. Could you check if this is still happening for you?
Still happening, recently been migrating to web components, problem mentioned above is still present.
This is mind-blowing. I cannot do a simple internal redirect to another page of my embedded app? The official shopify react router template doesn’t contain an example of using an s-link to an INTERNAL page.
I’m so incredibly frustrated with how Shopify has done this. You tell us to use Shopify React Router template, and we encounter something that doesn’t work fully
My ask is simple: Show us an example, using the official shopify react router template, of how to redirect from the root page, to another internal page of the same app. This is a BASIC ask - yet - doesn’t work. @Liam-Shopify @Paige-Shopify
I can manually go to /app/settings if I type it on my address bar - but I can’t , for the life of me , redirect to that page from the root route.
@Tiago_Reis the code I pasted previously does work for me now in the react router template. Also, doesn’t the template have a link to the “additional page” on the root page?
Here’s the package.json for my version of the template I’m using (working) if it helps:
{
"name": "template-tester",
"private": true,
"scripts": {
"build": "react-router build",
"dev": "shopify app dev",
"config:link": "shopify app config link",
"generate": "shopify app generate",
"deploy": "shopify app deploy",
"config:use": "shopify app config use",
"env": "shopify app env",
"start": "react-router-serve ./build/server/index.js",
"docker-start": "npm run setup && npm run start",
"setup": "prisma generate && prisma migrate deploy",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"shopify": "shopify",
"prisma": "prisma",
"graphql-codegen": "graphql-codegen",
"vite": "vite",
"typecheck": "react-router typegen && tsc --noEmit"
},
"type": "module",
"engines": {
"node": ">=20.10"
},
"dependencies": {
"@prisma/client": "^6.16.3",
"@react-router/dev": "^7.9.3",
"@react-router/fs-routes": "^7.9.3",
"@react-router/node": "^7.9.3",
"@react-router/serve": "^7.9.3",
"@shopify/app-bridge-react": "^4.2.4",
"@shopify/shopify-app-react-router": "^1.0.0",
"@shopify/shopify-app-session-storage-prisma": "^7.0.0",
"@tanstack/react-table": "^8.21.3",
"isbot": "^5.1.31",
"prisma": "^6.16.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.9.3",
"react-table": "^7.8.0",
"vite-tsconfig-paths": "^5.1.4"
},
"devDependencies": {
"@shopify/api-codegen-preset": "^1.2.0",
"@shopify/polaris-types": "^1.0.1",
"@types/eslint": "^9.6.1",
"@types/node": "^22.18.8",
"@types/react": "^18.3.25",
"@types/react-dom": "^18.3.7",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"eslint": "^8.57.1",
"eslint-import-resolver-typescript": "^3.10.1",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^4.6.2",
"graphql-config": "^5.1.1",
"prettier": "^3.6.2",
"typescript": "^5.9.3",
"vite": "^6.3.6"
},
"workspaces": [
"extensions/*"
],
"trustedDependencies": [
"@shopify/plugin-cloudflare"
],
"author": "ryanolf"
}
@Liam-Shopify & @Paige-Shopify I believe the s-buttons as primary actions in the headers have the same issue. I took the app you get from shopify app init and added the following code
<s-page heading="Additional page">
<s-button slot='primary-action' variant="primary" href="/app">home</s-button>
...
</s-page>
and
<s-page heading="Shopify app template">
<s-button slot="primary-action" onClick={generateProduct}>
Generate a product
</s-button>
<s-button slot='secondary-actions' variant="tertiary" href="/app/additional">Second</s-button>
...
</s-page>
and I have the same issue. No luck using onClick either it has the same issue.
Is this something you can look into or am I doing something wrong? Using s-link works perfectly other than logging this warning to the console “Only Button elements with a variant of primary are allowed in the primary-action slot.”
Thanks in advance for the help.
Edit: The secondary action also has the issue, its just s-buttons in general
I had the same problem for the longest time when I migrated cfdi.express to Polaris web components. I think the problem comes from Remix’s client-side navigation—when using the s-link web component instead of Remix’s <Link> component, the navigation triggers a full page render that doesn’t pass the App Bridge token and search parameters to the new iframe URL.
Anyway, I’m not entirely sure what causes the problem, but I found a fix by manually adding the search params to the navigation URL:
<s-link
slot="breadcrumb-actions"
onClick={() => {
const appUrl = window.location.origin;
const search = window.location.search;
const params = new URLSearchParams(search);
const link = new URL(`${appUrl}/app`);
link.search = params.toString();
open(link.toString(), "_self");
}}
>
Back
</s-link>
I’m still watching this thread to see if there’s a better solution.
I’m able to replicate the issue you’re experiencing in my own app. It seems to work initially for the first couple of clicks, but then doesn’t appear to work as expected afterwards.
The "Only Button elements with a variant of primary are allowed in the primary-action slot.” messaging would be about this default snippet not including variant="primary":
<s-button slot="primary-action" onClick={generateProduct}>
Generate a product
</s-button>
I’ll investigate this further on our end and see if we need a follow-up fix for this. Thanks for letting us know about this!
Breadcrumbs seem to work for me now, but using a button in the primary slot with either href or onClick does nothing or it redirects me to that auth page
@sonclock What kind of action are you taking with onClick? Navigating to another page?
Yeah same thing, because the href prop wasn’t working and showing a auth login area rather than redirecting to the page I wanted to go to, I supplemented it with a onClick with useNavigate and it does the same thing.
Great, thanks for letting us know!
We’ll make sure to consider this in our fix 