diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenu.tsx b/app/client/src/pages/Editor/EditorName/NavigationMenu.tsx
index 8edf49d58b..6679472c5e 100644
--- a/app/client/src/pages/Editor/EditorName/NavigationMenu.tsx
+++ b/app/client/src/pages/Editor/EditorName/NavigationMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import type { noop } from "lodash";
 
@@ -13,9 +13,12 @@ interface NavigationMenuProps {
 
 export function NavigationMenu(props: NavigationMenuProps) {
   const { menuItems, setIsPopoverOpen } = props;
+  const handleInteractionOutside = useCallback(() => {
+    setIsPopoverOpen(false);
+  }, [setIsPopoverOpen]);
 
   return (
-    <MenuContent width="214px">
+    <MenuContent onInteractOutside={handleInteractionOutside} width="214px">
       {menuItems?.map((item, idx) => {
         return (
           <NavigationMenuItem