diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 70cf02e714cf8..25275a95fe927 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -379,10 +379,26 @@ private static function get_classes( $attributes ) {
 		return implode( ' ', $classes );
 	}
 
+	/**
+	 * Returns whether or not the navigation is always overlay.
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return bool Returns whether or not the navigation is always overlay.
+	 */
 	private static function is_always_overlay( $attributes ) {
 		return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
 	}
 
+	/**
+	 * Returns whether or not the navigation is collapsable.
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return bool Returns whether or not the navigation is collapsable.
+	 */
+	private static function is_collapsable( $attributes ) {
+		return isset( $attributes['overlayMenu'] ) && in_array( $attributes['overlayMenu'], array( 'mobile', 'auto' ), true );
+	}
+
 	/**
 	 * Get styles for the navigation block.
 	 *
@@ -530,6 +546,12 @@ private static function get_nav_element_directives( $is_interactive, $attributes
 		if ( ! $is_interactive ) {
 			return '';
 		}
+
+		$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+		$is_experiment         = ( $gutenberg_experiments && array_key_exists( 'gutenberg-navigation-overlay-auto', $gutenberg_experiments ) ) ? true : false;
+
+		$overlay_menu = $is_experiment ? 'auto' : $attributes['overlayMenu'];
+
 		// When adding to this array be mindful of security concerns.
 		$nav_element_context    = wp_json_encode(
 			array(
@@ -537,6 +559,7 @@ private static function get_nav_element_directives( $is_interactive, $attributes
 				'type'            => 'overlay',
 				'roleAttribute'   => '',
 				'ariaLabel'       => __( 'Menu' ),
+				'overlayMenu'     => $overlay_menu,
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 		);
@@ -549,12 +572,20 @@ private static function get_nav_element_directives( $is_interactive, $attributes
 		* When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript
 		* is not needed for collapsing the menu because the class is set manually.
 		*/
-		if ( ! static::is_always_overlay( $attributes ) ) {
-			$nav_element_directives .= 'data-wp-init="callbacks.initNav"';
+		if ( static::is_collapsable( $attributes ) ) {
 			$nav_element_directives .= ' '; // space separator
 			$nav_element_directives .= 'data-wp-class--is-collapsed="context.isCollapsed"';
 		}
 
+		if ( isset( $overlay_menu ) && 'mobile' === $overlay_menu ) {
+			$nav_element_directives .= ' '; // space separator
+			$nav_element_directives .= 'data-wp-init="callbacks.initMobileNav"';
+		}
+		if ( isset( $overlay_menu ) && 'auto' === $overlay_menu ) {
+			$nav_element_directives .= ' '; // space separator
+			$nav_element_directives .= 'data-wp-init="callbacks.initAutoNav"';
+		}
+
 		return $nav_element_directives;
 	}