diff --git a/.changeset/blue-days-work.md b/.changeset/blue-days-work.md
new file mode 100644
index 000000000..d8fbcd4f7
--- /dev/null
+++ b/.changeset/blue-days-work.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/navbar": patch
+---
+
+Fix #1298 navbar-menu focus trapping fixed
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 4e862f39e..eac7f821b 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -5,7 +5,7 @@ import {AnimatePresence, HTMLMotionProps, motion} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
-import {Overlay} from "@react-aria/overlays";
+import {Overlay, DismissButton} from "@react-aria/overlays";
 
 import {menuVariants} from "./navbar-menu-transitions";
 import {useNavbarContext} from "./navbar-context";
@@ -27,7 +27,8 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
 
-  const {slots, isMenuOpen, height, disableAnimation, classNames} = useNavbarContext();
+  const {slots, isMenuOpen, setIsMenuOpen, height, disableAnimation, classNames} =
+    useNavbarContext();
 
   const styles = clsx(classNames?.menu, className);
 
@@ -35,7 +36,11 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
     ({children}: {children: ReactElement}) => {
       return (
         <RemoveScroll forwardProps enabled={isMenuOpen} removeScrollBar={false}>
-          {children}
+          <>
+            <DismissButton onDismiss={() => setIsMenuOpen(false)} />
+            {children}
+            <DismissButton onDismiss={() => setIsMenuOpen(false)} />
+          </>
         </RemoveScroll>
       );
     },