diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 0fd28025582dde..c7dd5850a505c3 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -95,6 +95,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-interactivity-api-navigation-block', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableNavigationBlockInteractivity = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' );
 	}
diff --git a/lib/experimental/interactivity-api/navigation-block-interactivity.php b/lib/experimental/interactivity-api/navigation-block-interactivity.php
new file mode 100644
index 00000000000000..21e1e0381b70ed
--- /dev/null
+++ b/lib/experimental/interactivity-api/navigation-block-interactivity.php
@@ -0,0 +1,240 @@
+<?php
+/**
+ * Extend WordPress core navigation block to use the Interactivity API.
+ * Interactivity API directives are added using the Tag Processor while it is experimental.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add Interactivity API directives to the navigation block markup using the Tag Processor
+ * The final HTML of the navigation block will look similar to this:
+ *
+ * <nav
+ *   data-wp-island
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation__responsive-container-open"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *   <div
+ *     class="wp-block-navigation__responsive-container"
+ *     data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
+ *     data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
+ *     data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.keydow="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     tabindex="-1"
+ *   >
+ *     <div class="wp-block-navigation__responsive-close">
+ *       <div
+ *         class="wp-block-navigation__responsive-dialog"
+ *         data-wp-bind.aria-modal="context.core.navigation.isMenuOpen"
+ *         data-wp-bind.role="selectors.core.navigation.roleAttribute"
+ *         data-wp-effect="effects.core.navigation.focusFirstElement"
+ *       >
+ *         <button
+ *           class="wp-block-navigation__responsive-container-close"
+ *           data-wp-on.click="actions.core.navigation.closeMenu"
+ *         >
+ *           <svg>
+ *         <button>
+ *         MENU ITEMS
+ *       </div>
+ *     </div>
+ *   </div>
+ * </nav>
+ *
+ * @param string $block_content Markup of the navigation block.
+ *
+ * @return string Navigation block markup with the proper directives
+ */
+function gutenberg_block_core_navigation_add_directives_to_markup( $block_content ) {
+	$w = new WP_HTML_Tag_Processor( $block_content );
+	// Add directives to the `<nav>` element.
+	if ( $w->next_tag( 'nav' ) ) {
+		$w->set_attribute( 'data-wp-island', '' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }' );
+	};
+
+	// Add directives to the open menu button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-open',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->remove_attribute( 'data-micromodal-trigger' );
+	} else {
+		// If the open modal button not found, we handle submenus immediately.
+		$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
+
+		// Add directives to the menu container.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'tabindex', '-1' );
+		};
+
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+		return $w->get_updated_html();
+	}
+
+	// Add directives to the menu container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-container',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		$w->set_attribute( 'tabindex', '-1' );
+	};
+
+	// Remove micromodal attribute.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-close',
+		)
+	) ) {
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Add directives to the dialog container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-dialog',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-bind.aria-modal', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.role', 'selectors.core.navigation.roleAttribute' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.focusFirstElement' );
+	};
+
+	// Add directives to the close button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-close',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenu' );
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Submenus.
+	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+	return $w->get_updated_html();
+};
+
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
+ * The final HTML of the navigation-submenu and the page-list blocks will look similar to this:
+ *
+ * <li
+ *   class="has-child"
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation-submenu__toggle"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *   >
+ *   </button>
+ *   <span>Title</span>
+ *   <ul
+ *     class="wp-block-navigation__submenu-container"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *     SUBMENU ITEMS
+ *   </ul>
+ * </li>
+ *
+ * @param string $w Markup of the navigation block.
+ *
+ * @return void
+ */
+function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
+	while ( $w->next_tag(
+		array(
+			'tag_name'   => 'LI',
+			'class_name' => 'has-child',
+		)
+	) ) {
+		// Add directives to the parent `<li>`.
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' );
+
+		// Add directives to the toggle submenu button.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+			$w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		};
+
+		// Add directives to the `<ul>` containing the subitems.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		};
+		// Iterate through subitems if exist.
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+	}
+};
+
+add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
+
+// Enqueue the `interactivity.js` file with the store.
+add_filter(
+	'block_type_metadata',
+	function ( $metadata ) {
+		if ( 'core/navigation' === $metadata['name'] ) {
+			wp_register_script(
+				'wp-block-navigation-view',
+				gutenberg_url( 'build/block-library/interactive-blocks/navigation.min.js' ),
+				array( 'wp-interactivity-runtime' )
+			);
+			$metadata['viewScript'] = array( 'wp-block-navigation-view' );
+		}
+		return $metadata;
+	},
+	10,
+	1
+);
diff --git a/lib/experimental/interactivity-api/script-loader.php b/lib/experimental/interactivity-api/script-loader.php
index 924dc196f10d26..15804ca1e92444 100644
--- a/lib/experimental/interactivity-api/script-loader.php
+++ b/lib/experimental/interactivity-api/script-loader.php
@@ -34,12 +34,11 @@ function gutenberg_register_interactivity_scripts( $scripts ) {
  * Adds the "defer" attribute to all the interactivity script tags.
  *
  * @param string $tag    The generated script tag.
- * @param string $handle The script's registered handle.
  *
  * @return string The modified script tag.
  */
-function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
-	if ( str_starts_with( $handle, 'wp-interactivity-' ) ) {
+function gutenberg_interactivity_scripts_add_defer_attribute( $tag ) {
+	if ( str_contains( $tag, '/block-library/interactive-blocks/' ) ) {
 		$p = new WP_HTML_Tag_Processor( $tag );
 		$p->next_tag( array( 'tag' => 'script' ) );
 		$p->set_attribute( 'defer', true );
@@ -47,4 +46,4 @@ function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
 	}
 	return $tag;
 }
-add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 );
+add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 1 );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index bcb29ffd1e8d51..ee51f5bea49f96 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -113,6 +113,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-interactivity-api-navigation-block',
+		__( 'Navigation block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Navigation block using the Interactivity API', 'gutenberg' ),
+			'id'    => 'gutenberg-interactivity-api-navigation-block',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/load.php b/lib/load.php
index ac4941cb0e96a5..79b076251e54ad 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -103,6 +103,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';
 require __DIR__ . '/experimental/navigation-fallback.php';
+if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-navigation-block' ) ) {
+	require __DIR__ . '/experimental/interactivity-api/navigation-block-interactivity.php';
+}
 
 // Fonts API.
 if ( ! class_exists( 'WP_Fonts' ) ) {
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
new file mode 100644
index 00000000000000..bf537ceb803a4d
--- /dev/null
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -0,0 +1,144 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	effects: {
+		core: {
+			navigation: {
+				initModal: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( { context } ) => {
+					return context.core.navigation.overlay &&
+						context.core.navigation.isMenuOpen
+						? 'dialog'
+						: '';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenu: ( { context, ref } ) => {
+					context.core.navigation.isMenuOpen = true;
+					context.core.navigation.previousFocus = ref;
+					if ( context.core.navigation.overlay ) {
+						// It adds a `has-modal-open` class to the <html> root
+						document.documentElement.classList.add(
+							'has-modal-open'
+						);
+					}
+				},
+				closeMenu: ( { context } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						context.core.navigation.isMenuOpen = false;
+						if (
+							context.core.navigation.modal.contains(
+								window.document.activeElement
+							)
+						) {
+							context.core.navigation.previousFocus.focus();
+						}
+						context.core.navigation.modal = null;
+						context.core.navigation.previousFocus = null;
+						if ( context.core.navigation.overlay ) {
+							document.documentElement.classList.remove(
+								'has-modal-open'
+							);
+						}
+					}
+				},
+				handleMenuKeydown: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If Escape close the menu
+						if (
+							event?.key === 'Escape' ||
+							event?.keyCode === 27
+						) {
+							actions.core.navigation.closeMenu( { context } );
+							return;
+						}
+
+						// Trap focus if it is an overlay (main menu)
+						if (
+							context.core.navigation.overlay &&
+							( event.key === 'Tab' || event.keyCode === 9 )
+						) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If focus is outside modal, and in the document, close menu
+						// event.target === The element losing focus
+						// event.relatedTarget === The element receiving focus (if any)
+						// When focusout is outsite the document, `window.document.activeElement` doesn't change
+						if (
+							! context.core.navigation.modal.contains(
+								event.relatedTarget
+							) &&
+							event.target !== window.document.activeElement
+						) {
+							actions.core.navigation.closeMenu( { context } );
+						}
+					}
+				},
+			},
+		},
+	},
+} );
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index 35081eb3b12dda..d8bcf0559fdbd7 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -221,7 +221,8 @@ module.exports = [
 	},
 	{
 		entry: {
-			// blockname: './packages/block-library/src/blockname/interactivity.js',
+			navigation:
+				'./packages/block-library/src/navigation/interactivity.js',
 		},
 		output: {
 			devtoolNamespace: 'wp',