+
+
+ Current URL: /random-page
+
+
+ {/* Without hrefs */}
+
+ {' '}
+ Case 1: Without hrefs
+
+
+
+ Settings
+ Preferences
+ Advanced
+
+
+ Settings content - React Aria manages this selection
+
+
+ Preferences content - works normally
+
+
+ Advanced content - local state only
+
+
+
+ {/* With hrefs */}
+
+ {' '}
+ Case 2: With hrefs By default no selection is shown
+ because the URL doesn't match any tab's href.{' '}
+
+
+
+
+ Catalog
+
+
+ Create
+
+
+ Docs
+
+
+
+
+
+ ),
+};
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index dacb355fc9..371de4ef41 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -115,9 +115,22 @@ export const Tabs = (props: TabsProps) => {
}
}
}
+
+ //No route matches - check if all tabs have hrefs (pure navigation)
+ const allTabsHaveHref = tabListChildren.every(
+ child => isValidElement(child) && child.props.href,
+ );
+
+ if (allTabsHaveHref) {
+ // Pure navigation tabs, no route match
+ return null;
+ } else {
+ // Mixed tabs or pure local state
+ return undefined;
+ }
}
}
- return null;
+ return undefined;
})();
if (!children) return null;