Add Navigation examples to 2025-10

Author: andrewmcgov

packages/ui-extensions/docs/surfaces/customer-account/reference/apis/navigation.doc.ts

@@ -28,6 +28,33 @@ const data: ReferenceEntityTemplateSchema = {
       ],
     },
   },
+  examples: {
+    description: 'Navigation api examples',
+    examples: [
+      {
+        codeblock: {
+          title: 'Listening for navigation current entry events',
+          tabs: [
+            {
+              code: '../examples/apis/navigation-event-listeners.example.jsx',
+              language: 'jsx',
+            },
+          ],
+        },
+      },
+      {
+        codeblock: {
+          title: 'Navigating to native order index page',
+          tabs: [
+            {
+              code: '../examples/apis/navigating-to-customer-account-page.example.jsx',
+              language: 'jsx',
+            },
+          ],
+        },
+      },
+    ],
+  },
   related: [],
 };
 

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/navigating-to-customer-account-page.example.jsx

@@ -0,0 +1,20 @@
+import '@shopify/ui-extensions/preact';
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  return (
+    <s-button
+      onClick={() => {
+        navigation.navigate(
+          'shopify:customer-account/orders',
+        );
+      }}
+    >
+      Navigate to orders path
+    </s-button>
+  );
+}

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/navigation-event-listeners.example.jsx

@@ -0,0 +1,85 @@
+import '@shopify/ui-extensions/preact';
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [currentEntryUrl, setCurrentEntryUrl] =
+    useState(navigation.currentEntry.url);
+
+  useEffect(() => {
+    function updateCurrentEntryUrl() {
+      setCurrentEntryUrl(
+        navigation.currentEntry.url,
+      );
+    }
+
+    navigation.addEventListener(
+      'currententrychange',
+      updateCurrentEntryUrl,
+    );
+    return () =>
+      navigation.removeEventListener(
+        'currententrychange',
+        updateCurrentEntryUrl,
+      );
+  }, []);
+
+  if (currentEntryUrl === 'extension:/') {
+    return <Wishlists />;
+  } else if (
+    currentEntryUrl.includes(
+      'extension:/wishlist/',
+    )
+  ) {
+    return <WishlistItemDetails />;
+  } else {
+    return <NotFound />;
+  }
+}
+
+function Wishlists() {
+  return (
+    <s-page heading="Wishlist">
+      <s-button
+        slot="secondary-actions"
+        href="extension:/wishlist/123"
+      >
+        Wishlist details
+      </s-button>
+      <s-text>Wishlist content</s-text>
+    </s-page>
+  );
+}
+
+function WishlistItemDetails() {
+  return (
+    <s-page heading="Wishlist item details">
+      <s-button
+        slot="breadcrumb-actions"
+        accessibilityLabel="Back to wishlists"
+        href="extension:/"
+      ></s-button>
+      <s-button
+        slot="secondary-actions"
+        href="extension:/"
+      >
+        Back to wishlists
+      </s-button>
+      <s-text>
+        Wishlist item details content
+      </s-text>
+    </s-page>
+  );
+}
+
+function NotFound() {
+  return (
+    <s-stack>
+      <s-heading>Resource Not found</s-heading>
+    </s-stack>
+  );
+}