diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index c38ddf0cff789d..cb930d0a8fb45d 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -117,7 +117,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 28da77e0f021df..9302c948791ffe 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -396,6 +396,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
+	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
+	if ( $should_load_modal_view_script ) {
+		wp_enqueue_script( 'wp-block-navigation-view-modal' );
+	}
+
 	$inner_blocks = $block->inner_blocks;
 
 	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.
diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js
new file mode 100644
index 00000000000000..c9028af28ab2a5
--- /dev/null
+++ b/packages/block-library/src/navigation/view-modal.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import MicroModal from 'micromodal';
+
+// Responsive navigation toggle.
+function navigationToggleModal( modal ) {
+	const dialogContainer = modal.querySelector(
+		`.wp-block-navigation__responsive-dialog`
+	);
+
+	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
+
+	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
+
+	// Add a class to indicate the modal is open.
+	const htmlElement = document.documentElement;
+	htmlElement.classList.toggle( 'has-modal-open' );
+}
+
+window.addEventListener( 'load', () => {
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );
+} );
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 60d6a342a9c437..5116f983b54000 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,32 +1,3 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
-
-	if ( isHidden ) {
-		dialogContainer.removeAttribute( 'role' );
-		dialogContainer.removeAttribute( 'aria-modal' );
-	} else {
-		dialogContainer.setAttribute( 'role', 'dialog' );
-		dialogContainer.setAttribute( 'aria-modal', 'true' );
-	}
-
-	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
 // Open on click functionality.
 function closeSubmenus( element ) {
 	element
@@ -65,12 +36,6 @@ function toggleSubmenuOnClick( event ) {
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
 window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
 	const submenuButtons = document.querySelectorAll(
 		'.wp-block-navigation-submenu__toggle'
 	);