From f6f5dd0e0d4d4b44565d9ddb6de8522eeb80230d Mon Sep 17 00:00:00 2001
From: Laura Beatris <laurabeatriserafim@gmail.com>
Date: Sat, 16 May 2026 07:04:34 -0300
Subject: [PATCH 1/2] Forward `containerSx` to `Navbar`

---
 .../ConfigureSSO/ConfigureSSONavbar.tsx       |  4 ++
 packages/ui/src/elements/Navbar.tsx           | 72 ++++++++++---------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
index f993aca4765..c4f60ee94de 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
@@ -70,6 +70,10 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
           </Flex>
         }
         titleSx={t => ({ fontSize: t.fontSizes.$lg })}
+        containerSx={{
+          flexDirection: 'column-reverse',
+          flex: 0,
+        }}
         title={localizationKeys('configureSSO.navbar.title')}
         routes={[]}
         contentRef={contentRef}
diff --git a/packages/ui/src/elements/Navbar.tsx b/packages/ui/src/elements/Navbar.tsx
index 1871c0c5825..538a83474cd 100644
--- a/packages/ui/src/elements/Navbar.tsx
+++ b/packages/ui/src/elements/Navbar.tsx
@@ -45,6 +45,7 @@ export type NavbarRoute = {
 type NavBarProps = {
   title: LocalizationKey;
   titleSx?: ThemableCssProp;
+  containerSx?: ThemableCssProp;
   description?: LocalizationKey;
   contentRef: React.RefObject<HTMLDivElement>;
   routes: NavbarRoute[];
@@ -52,7 +53,7 @@ type NavBarProps = {
 };
 
 export const NavBar = (props: NavBarProps) => {
-  const { contentRef, title, titleSx, description, routes, header } = props;
+  const { contentRef, title, titleSx, containerSx, description, routes, header } = props;
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -91,43 +92,45 @@ export const NavBar = (props: NavBarProps) => {
     [router.currentPath],
   );
 
-  const items = (
-    <Col
-      elementDescriptor={descriptors.navbarButtons}
-      sx={t => ({
-        gap: t.space.$0x5,
-      })}
-    >
-      {routes.map(r => (
-        <NavButton
-          key={r.id}
-          elementDescriptor={descriptors.navbarButton}
-          elementId={descriptors.navbarButton.setId(r.id as any)}
-          iconElementDescriptor={descriptors.navbarButtonIcon}
-          iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
-          onClick={handleNavigate(r)}
-          icon={r.icon}
-          isActive={checkIfActive(r)}
-          sx={t => ({
-            padding: `${t.space.$1x5} ${t.space.$3}`,
-            minHeight: t.space.$8,
-          })}
-        >
-          <Span
-            elementDescriptor={descriptors.navbarButtonText}
-            elementId={descriptors.navbarButtonText.setId(r.id as any)}
-            localizationKey={r.name}
-          />
-        </NavButton>
-      ))}
-    </Col>
-  );
+  const items =
+    routes.length > 0 ? (
+      <Col
+        elementDescriptor={descriptors.navbarButtons}
+        sx={t => ({
+          gap: t.space.$0x5,
+        })}
+      >
+        {routes.map(r => (
+          <NavButton
+            key={r.id}
+            elementDescriptor={descriptors.navbarButton}
+            elementId={descriptors.navbarButton.setId(r.id as any)}
+            iconElementDescriptor={descriptors.navbarButtonIcon}
+            iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
+            onClick={handleNavigate(r)}
+            icon={r.icon}
+            isActive={checkIfActive(r)}
+            sx={t => ({
+              padding: `${t.space.$1x5} ${t.space.$3}`,
+              minHeight: t.space.$8,
+            })}
+          >
+            <Span
+              elementDescriptor={descriptors.navbarButtonText}
+              elementId={descriptors.navbarButtonText.setId(r.id as any)}
+              localizationKey={r.name}
+            />
+          </NavButton>
+        ))}
+      </Col>
+    ) : null;
 
   return (
     <>
       <NavbarContainer
         title={title}
         titleSx={titleSx}
+        containerSx={containerSx}
         description={description}
       >
         {header}
@@ -145,10 +148,11 @@ const NavbarContainer = (
   props: React.PropsWithChildren<{
     title: LocalizationKey | string;
     titleSx?: ThemableCssProp;
+    containerSx?: ThemableCssProp;
     description?: LocalizationKey | string;
   }>,
 ) => {
-  const { title, titleSx, description } = props;
+  const { title, titleSx, containerSx, description } = props;
   return (
     <Col
       elementDescriptor={descriptors.navbar}
@@ -169,7 +173,7 @@ const NavbarContainer = (
     >
       <DevModeOverlay />
 
-      <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
+      <Col sx={[t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` }), containerSx]}>
         <Col
           sx={t => ({
             gap: t.space.$0x5,

From 83be304c12e3680a32d2177d69a3dbdb94929b31 Mon Sep 17 00:00:00 2001
From: Laura Beatris <laurabeatriserafim@gmail.com>
Date: Mon, 18 May 2026 12:08:25 -0300
Subject: [PATCH 2/2] Add changeset

---
 .changeset/thirty-jeans-live.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thirty-jeans-live.md

diff --git a/.changeset/thirty-jeans-live.md b/.changeset/thirty-jeans-live.md
new file mode 100644
index 00000000000..622891de6ab
--- /dev/null
+++ b/.changeset/thirty-jeans-live.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Update `NavBar` to receive `containerSx` prop