diff --git a/layouts/InAppUILayout.tsx b/layouts/InAppUILayout.tsx
index 4c2688a02..fe4179695 100644
--- a/layouts/InAppUILayout.tsx
+++ b/layouts/InAppUILayout.tsx
@@ -151,7 +151,23 @@ const InAppUILayout = ({ frontMatter, sourcePath, children }) => {
     return Object.keys(languageMap)[0] as Language;
   });
 
-  const selectedSdkContent = languageMap[selectedSdk];
+  // Sync selectedSdk when paths change (e.g., after hydration when router.query becomes available)
+  useEffect(() => {
+    const sdkFromPath = paths[1] as Language;
+    if (
+      sdkFromPath &&
+      languageMap[sdkFromPath] &&
+      sdkFromPath !== selectedSdk
+    ) {
+      setSelectedSdk(sdkFromPath);
+    }
+  }, [paths, selectedSdk]);
+
+  // Derive SDK from path for breadcrumb computation to avoid timing issues with state
+  const sdkFromPath = paths[1] as Language;
+  const effectiveSdk =
+    sdkFromPath && languageMap[sdkFromPath] ? sdkFromPath : selectedSdk;
+  const selectedSdkContent = languageMap[effectiveSdk];
   const allSidebarContent = [...IN_APP_UI_SIDEBAR, ...selectedSdkContent.items];
 
   // @ts-expect-error we do get these, need to come back to breadcrumbs
@@ -179,7 +195,7 @@ const InAppUILayout = ({ frontMatter, sourcePath, children }) => {
         mobileSidebar={
           <MobileSidebar>
             <InAppSidebar
-              selectedSdk={selectedSdk}
+              selectedSdk={effectiveSdk}
               selectedSdkContent={selectedSdkContent}
               handleSdkChange={handleSdkChange}
             />
@@ -192,7 +208,7 @@ const InAppUILayout = ({ frontMatter, sourcePath, children }) => {
             <Sidebar.ScrollContainer scrollerRef={scrollerRef}>
               <Stack direction="column" gap="2">
                 <InAppSidebar
-                  selectedSdk={selectedSdk}
+                  selectedSdk={effectiveSdk}
                   selectedSdkContent={selectedSdkContent}
                   handleSdkChange={handleSdkChange}
                 />
diff --git a/lib/content.ts b/lib/content.ts
index 42832f4ea..a74c1bf4e 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -25,30 +25,39 @@ export function getInAppSidebar(
   // Get the deepest page that matches the paths
   const { section, page } = depthFirstSidebarInfo(paths, allSidebarContent);
 
-  return {
-    breadcrumbs: [
-      {
-        slug: "in-app-ui",
-        title: "In-App UI",
-        path: "/in-app-ui",
-      },
-      {
-        slug: `/in-app-ui/${selectedSdkContent.value}`,
-        title: selectedSdkContent.title,
-        path: `/in-app-ui/${selectedSdkContent.value}`,
-      },
-      {
-        slug: `${section?.slug}`,
-        title: section?.title,
-        path: `${section?.slug}`,
-      },
-      {
-        slug: `${section?.slug}${page?.slug}`,
-        title: page?.title,
-        path: `${section?.slug}${page?.slug}`,
-      },
-    ],
-  };
+  // Build breadcrumbs array conditionally to avoid "undefined" strings
+  const breadcrumbs: Array<{ slug: string; title: string; path: string }> = [
+    {
+      slug: "in-app-ui",
+      title: "In-App UI",
+      path: "/in-app-ui",
+    },
+    {
+      slug: `/in-app-ui/${selectedSdkContent.value}`,
+      title: selectedSdkContent.title,
+      path: `/in-app-ui/${selectedSdkContent.value}`,
+    },
+  ];
+
+  // Only add section breadcrumb if section was found
+  if (section?.slug && section?.title) {
+    breadcrumbs.push({
+      slug: section.slug,
+      title: section.title,
+      path: section.slug,
+    });
+  }
+
+  // Only add page breadcrumb if both section and page were found
+  if (section?.slug && page?.slug && page?.title) {
+    breadcrumbs.push({
+      slug: `${section.slug}${page.slug}`,
+      title: page.title,
+      path: `${section.slug}${page.slug}`,
+    });
+  }
+
+  return { breadcrumbs };
 }
 
 export function depthFirstSidebarInfo(