diff --git a/.yarn/versions/98967128.yml b/.yarn/versions/98967128.yml
new file mode 100644
index 0000000000..e435071de6
--- /dev/null
+++ b/.yarn/versions/98967128.yml
@@ -0,0 +1,3 @@
+releases:
+ "@radix-ui/react-navigation-menu": minor
+ primitives: minor
diff --git a/packages/react/navigation-menu/src/NavigationMenu.stories.tsx b/packages/react/navigation-menu/src/NavigationMenu.stories.tsx
index e8badc91e2..908ae64c93 100644
--- a/packages/react/navigation-menu/src/NavigationMenu.stories.tsx
+++ b/packages/react/navigation-menu/src/NavigationMenu.stories.tsx
@@ -86,6 +86,16 @@ export const CustomDurations = () => {
Custom (2000ms to move from one trigger to another)
+
+ Close delay duration
+ Default (150ms)
+
+
+ Custom (500ms)
+
+
+ Custom (1000ms)
+
);
};
diff --git a/packages/react/navigation-menu/src/NavigationMenu.tsx b/packages/react/navigation-menu/src/NavigationMenu.tsx
index e450ce8dba..82af412482 100644
--- a/packages/react/navigation-menu/src/NavigationMenu.tsx
+++ b/packages/react/navigation-menu/src/NavigationMenu.tsx
@@ -95,6 +95,11 @@ interface NavigationMenuProps
* @defaultValue 300
*/
skipDelayDuration?: number;
+ /**
+ * The delay before closing menu when the pointer leaves trigger or content area.
+ * @defaultValue 150
+ */
+ closeDelayDuration?: number;
}
const NavigationMenu = React.forwardRef(
@@ -106,6 +111,7 @@ const NavigationMenu = React.forwardRef {
window.clearTimeout(closeTimerRef.current);
- closeTimerRef.current = window.setTimeout(() => setValue(''), 150);
+ closeTimerRef.current = window.setTimeout(() => setValue(''), closeDelayDuration);
}, [setValue]);
const handleOpen = React.useCallback(