diff --git a/examples/core/src/components/header/navigation/NavBarPopover.tsx b/examples/core/src/components/header/navigation/NavBarPopover.tsx
index 59df4fe0..335bba73 100644
--- a/examples/core/src/components/header/navigation/NavBarPopover.tsx
+++ b/examples/core/src/components/header/navigation/NavBarPopover.tsx
@@ -22,22 +22,23 @@ export function NavBarPopover({
       <div key={item.id} className="flex flex-col gap-3 text-sm text-gray-500">
         <span className="font-semibold text-black">{item.name}</span>
         {item.children.map((child: NavigationNode) => (
-          <LocaleLink
+          <NavigationMenuLink
             key={child.id}
-            href={`/search${child.href}`}
-            legacyBehavior
-            passHref
+            className="hover:text-brand-primary hover:underline cursor-pointer"
+            onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/search${child.href}`;
+            }}
           >
-            <NavigationMenuLink className="hover:text-brand-primary hover:underline">
-              {child.name}
-            </NavigationMenuLink>
-          </LocaleLink>
-        ))}
-        <LocaleLink href={`/search${item.href}`} legacyBehavior passHref>
-          <NavigationMenuLink className="hover:text-brand-primary hover:underline font-semibold">
-            Browse All
+            {child.name}
           </NavigationMenuLink>
-        </LocaleLink>
+        ))}
+        <NavigationMenuLink className="hover:text-brand-primary hover:underline font-semibold cursor-pointer" onClick={(e) => {
+          e.preventDefault();
+          window.location.href = `/search${item.href}`;
+        }}>
+          Browse All
+        </NavigationMenuLink>
       </div>
     );
   };
@@ -63,16 +64,13 @@ export function NavBarPopover({
                         )}
                       </div>
                       <hr className="my-6 border-gray-200"></hr>
-                      <LocaleLink
-                        href={`/search${item.href}`}
-                        legacyBehavior
-                        passHref
-                      >
-                        <NavigationMenuLink className="text-sm font-semibold hover:text-brand-primary hover:underline mb-12 flex text-black">
-                          Browse All {item.name}
-                          <ArrowRightIcon className="ml-1 w-4" />
-                        </NavigationMenuLink>
-                      </LocaleLink>
+                      <NavigationMenuLink className="text-sm font-semibold hover:text-brand-primary hover:underline mb-12 flex text-black cursor-pointer" onClick={(e) => {
+                        e.preventDefault();
+                        window.location.href = `/search${item.href}`;
+                      }}>
+                        Browse All {item.name}
+                        <ArrowRightIcon className="ml-1 w-4" />
+                      </NavigationMenuLink>
                     </div>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
diff --git a/examples/core/src/lib/build-site-navigation.ts b/examples/core/src/lib/build-site-navigation.ts
index fe3191d5..335a9807 100644
--- a/examples/core/src/lib/build-site-navigation.ts
+++ b/examples/core/src/lib/build-site-navigation.ts
@@ -50,6 +50,7 @@ function constructTree(
         name: hierarchy.attributes?.name!,
         id: hierarchy.id!,
         slug: hierarchy.attributes?.slug,
+        parentName: "",
       }),
     )
     .map(async (hierarchy) => {
@@ -72,29 +73,29 @@ function constructTree(
       // Build 2nd level by finding all 'child nodes' belonging to each first level featured-nodes
       const directs = directChildren.data?.data
         ? directChildren.data.data.slice(0, 4).map((child) => {
-            const children: ISchema[] = allNodes.data?.data
-              ? allNodes.data.data
-                  .filter(
-                    (node) => node?.relationships?.parent?.data.id === child.id,
-                  )
-                  .map((node) =>
-                    createNode({
-                      name: node.attributes?.name!,
-                      id: node.id!,
-                      slug: node.attributes?.slug,
-                      hrefBase: `${hierarchy.href}/${child.attributes?.slug}`,
-                    }),
-                  )
-              : [];
+          const children: ISchema[] = allNodes.data?.data
+            ? allNodes.data.data
+              .filter(
+                (node) => node?.relationships?.parent?.data.id === child.id,
+              )
+              .map((node) =>
+                createNode({
+                  name: node.attributes?.name!,
+                  id: node.id!,
+                  slug: node.attributes?.slug,
+                  parentName: `${hierarchy.name} > ${child.attributes?.name}`,
+                }),
+              )
+            : [];
 
-            return createNode({
-              name: child.attributes?.name!,
-              id: child.id!,
-              slug: child.attributes?.slug,
-              hrefBase: hierarchy.href,
-              children,
-            });
-          })
+          return createNode({
+            name: child.attributes?.name!,
+            id: child.id!,
+            slug: child.attributes?.slug,
+            parentName: hierarchy.name,
+            children,
+          });
+        })
         : [];
 
       return { ...hierarchy, children: directs };
@@ -117,12 +118,21 @@ function createNode({
   slug = "missing-slug",
   hrefBase = "",
   children = [],
-}: CreateNodeDefinition): ISchema {
+  parentName = "",
+}: CreateNodeDefinition & { parentName?: string }): ISchema {
+  const hierarchicalPath = parentName
+    ? `${parentName} > ${name}`
+    : name;
+  const segments = hierarchicalPath.split(" > ").filter(Boolean);
+  const urlPath = segments.length > 0
+    ? "/" + segments.map(segment => encodeURIComponent(segment)).join("/")
+    : "";
+
   return {
     name,
     id,
     slug,
-    href: `${hrefBase}/${slug}`,
+    href: `${hrefBase}/${urlPath}`,
     children,
   };
 }