Skip to content

portal: Update SDK Reference breadcrumbs UI #8662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MananTank wants to merge 2 commits into
base: main
Choose a base branch
from
+37 −17
Open

portal: Update SDK Reference breadcrumbs UI #8662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c33c175
portal: Update SDK Reference breadcrumbs UI
MananTank Feb 3, 2026
a7b6fe9
top padding correction on sidebar
MananTank Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 24 additions & 9 deletions apps/portal/src/app/references/components/TDoc/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,27 @@ export function getTDocPage(options: {
// category pages
if (docSlug in subgroups) {
return (
<CategoryPage
doc={doc}
packageSlug={packageSlug}
slug={docSlug as keyof typeof subgroups}
version={version}
/>
<div>
<Breadcrumb
crumbs={[
{
href: `/references/${packageSlug}/${version}`,
name: sdkTitle,
},
{
href: `/references/${packageSlug}/${version}/${docSlug}`,
name: docSlug,
},
]}
/>

<CategoryPage
doc={doc}
packageSlug={packageSlug}
slug={docSlug as keyof typeof subgroups}
version={version}
/>
</div>
Comment on lines +55 to +75
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use the subgroup display name for the category breadcrumb.
The breadcrumb currently shows the raw slug, which is less readable than the subgroup name already used in the page heading. Consider mapping to subgroups[...] with a fallback.

💡 Suggested fix 
-      if (docSlug in subgroups) {
-        return (
-          <div>
-            <Breadcrumb
-              crumbs={[
-                {
-                  href: `/references/${packageSlug}/${version}`,
-                  name: sdkTitle,
-                },
-                {
-                  href: `/references/${packageSlug}/${version}/${docSlug}`,
-                  name: docSlug,
-                },
-              ]}
-            />
-
-            <CategoryPage
-              doc={doc}
-              packageSlug={packageSlug}
-              slug={docSlug as keyof typeof subgroups}
-              version={version}
-            />
-          </div>
-        );
-      }
+      if (docSlug in subgroups) {
+        const subgroupKey = docSlug as keyof typeof subgroups;
+        return (
+          <div>
+            <Breadcrumb
+              crumbs={[
+                {
+                  href: `/references/${packageSlug}/${version}`,
+                  name: sdkTitle,
+                },
+                {
+                  href: `/references/${packageSlug}/${version}/${docSlug}`,
+                  name: subgroups[subgroupKey] ?? docSlug,
+                },
+              ]}
+            />
+
+            <CategoryPage
+              doc={doc}
+              packageSlug={packageSlug}
+              slug={subgroupKey}
+              version={version}
+            />
+          </div>
+        );
+      }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div>
<Breadcrumb
crumbs={[
{
href: `/references/${packageSlug}/${version}`,
name: sdkTitle,
},
{
href: `/references/${packageSlug}/${version}/${docSlug}`,
name: docSlug,
},
]}
/>
<CategoryPage
doc={doc}
packageSlug={packageSlug}
slug={docSlug as keyof typeof subgroups}
version={version}
/>
</div>
if (docSlug in subgroups) {
const subgroupKey = docSlug as keyof typeof subgroups;
return (
<div>
<Breadcrumb
crumbs={[
{
href: `/references/${packageSlug}/${version}`,
name: sdkTitle,
},
{
href: `/references/${packageSlug}/${version}/${docSlug}`,
name: subgroups[subgroupKey] ?? docSlug,
},
]}
/>
<CategoryPage
doc={doc}
packageSlug={packageSlug}
slug={subgroupKey}
version={version}
/>
</div>
);
}
🤖 Prompt for AI Agents 
In `@apps/portal/src/app/references/components/TDoc/PageLayout.tsx` around lines
55 - 75, The breadcrumb is using the raw docSlug for the second crumb instead of
the human-friendly subgroup display name; update the second crumb's name to map
docSlug to subgroups[docSlug]?.displayName (or whichever property holds the
readable name) with a fallback to docSlug so Breadcrumb shows the subgroup
display name; modify the component where Breadcrumb is rendered (the block
containing Breadcrumb and CategoryPage) to compute a label from subgroups and
pass that as the crumb name while keeping hrefs unchanged.

);
}

Expand All @@ -74,7 +89,7 @@ export function getTDocPage(options: {
crumbs={[
{
href: `/references/${packageSlug}/${version}`,
name: "References",
name: sdkTitle,
},
{
href: `/references/${packageSlug}/${version}/${selectedDoc.name}`,
Expand Down Expand Up @@ -209,8 +224,8 @@ async function IndexContent(props: {

return (
<div>
<Heading anchorId="reference" level={1}>
{props.sdkTitle} Reference
<Heading anchorId="reference" level={1} className="mb-6 mt-2">
{props.sdkTitle}
</Heading>

<div className="flex flex-col gap-3">
Expand Down
13 changes: 6 additions & 7 deletions apps/portal/src/components/Layouts/DocLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ export function DocLayout(props: DocLayoutProps) {
"hidden xl:flex",
)}
>
<DocSidebar {...props.sideBar} header={props.sidebarHeader} />
<DocSidebar
{...props.sideBar}
header={props.sidebarHeader}
className="pt-1"
/>
</aside>
)}
<div className="sticky top-sticky-top-height z-stickyMobileSidebar border-b bg-card/50 backdrop-blur-xl p-4 xl:hidden -mx-4">
Expand All @@ -57,12 +61,7 @@ export function DocLayout(props: DocLayoutProps) {
data-no-llm={props.noLLM}
data-noindex={props.noIndex}
>
<div className="grow xl:mt-6">
<h5 className="mb-2 text-sm text-muted-foreground">
{props.sideBar.name}
</h5>
{props.children}
</div>
<div className="grow xl:mt-6">{props.children}</div>
<div className="mt-16 xl:mt-20">
<PageFooter
editPageButton={props.editPageButton}
Expand Down
8 changes: 7 additions & 1 deletion apps/portal/src/components/others/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,17 @@ type ReferenceSideBarProps = {
onLinkClick?: () => void;
header?: React.ReactNode;
name: string;
className?: string;
};

export function DocSidebar(props: ReferenceSideBarProps) {
return (
<div className="flex h-full flex-col pb-10 pt-6 text-muted-foreground text-sm">
<div
className={cn(
"flex h-full flex-col pb-10 pt-6 text-muted-foreground text-sm",
props.className,
)}
>
{/* Side bar Name */}
{props.header}
<ul className="styled-scrollbar transform-gpu space-y-1">
Expand Down