diff --git a/apps/docs/components/Navigation.tsx b/apps/docs/components/Navigation.tsx
index 6b5b693071..c72a327a16 100644
--- a/apps/docs/components/Navigation.tsx
+++ b/apps/docs/components/Navigation.tsx
@@ -289,6 +289,25 @@ interface NavigationProps extends React.ComponentPropsWithoutRef<"nav"> {
 export const Navigation = ({ isMobile, ...props }: NavigationProps) => {
   const [activeGroup, setActiveGroup] = useState<NavGroup | null>(navigation[0]);
   const [openGroups, setOpenGroups] = useState<string[]>([]);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    // Check the current pathname and set the active group
+    navigation.forEach((group) => {
+      group.links.forEach((link) => {
+        if (link.href && pathname.startsWith(link.href)) {
+          setActiveGroup(group);
+        } else if (link.children) {
+          link.children.forEach((child) => {
+            if (pathname.startsWith(child.href)) {
+              setActiveGroup(group);
+              setOpenGroups([`${group.title}-${link.title}`]); // Ensure parent is open
+            }
+          });
+        }
+      });
+    });
+  }, [pathname]);
 
   return (
     <nav {...props}>