diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 6cf5eea22e0a0..588f4397274bd 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -14,7 +14,6 @@ import {
 	useMemo,
 } from '@wordpress/element';
 import {
-	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
 	useBlockProps,
 	__experimentalRecursionProvider as RecursionProvider,
@@ -37,8 +36,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -53,7 +50,6 @@ import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
-import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
@@ -69,6 +65,7 @@ import useCreateNavigationMenu from './use-create-navigation-menu';
 import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
+import MenuInspectorControls from './menu-inspector-controls';
 
 function Navigation( {
 	attributes,
@@ -663,84 +660,26 @@ function Navigation( {
 	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 
-	const WrappedNavigationMenuSelector = ( { currentMenuId } ) => (
-		<NavigationMenuSelector
-			currentMenuId={ currentMenuId }
-			clientId={ clientId }
-			onSelectNavigationMenu={ ( menuId ) => {
-				handleUpdateMenu( menuId );
-			} }
-			onSelectClassicMenu={ async ( classicMenu ) => {
-				const navMenu = await convertClassicMenu(
-					classicMenu.id,
-					classicMenu.name,
-					'draft'
-				);
-				if ( navMenu ) {
-					handleUpdateMenu( navMenu.id, {
-						focusNavigationBlock: true,
-					} );
-				}
-			} }
-			onCreateNew={ createUntitledEmptyNavigationMenu }
-			createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
-			createNavigationMenuIsError={ createNavigationMenuIsError }
-			/* translators: %s: The name of a menu. */
-			actionLabel={ __( "Switch to '%s'" ) }
-		/>
-	);
-
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
-	const MenuInspectorControls = ( { currentMenuId = null } ) => (
-		<InspectorControls>
-			<PanelBody
-				title={
-					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
-				}
-			>
-				{ isOffCanvasNavigationEditorEnabled ? (
-					<>
-						<HStack className="wp-block-navigation-off-canvas-editor__header">
-							<Heading
-								className="wp-block-navigation-off-canvas-editor__title"
-								level={ 2 }
-							>
-								{ __( 'Menu' ) }
-							</Heading>
-							<WrappedNavigationMenuSelector
-								currentMenuId={ currentMenuId }
-							/>
-						</HStack>
-						{ currentMenuId && isNavigationMenuMissing ? (
-							<p>{ __( 'Select or create a menu' ) }</p>
-						) : (
-							<OffCanvasEditor
-								blocks={ innerBlocks }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-					</>
-				) : (
-					<>
-						<WrappedNavigationMenuSelector
-							currentMenuId={ currentMenuId }
-						/>
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-						/>
-					</>
-				) }
-			</PanelBody>
-		</InspectorControls>
-	);
-
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
 			<TagName { ...blockProps }>
-				<MenuInspectorControls currentMenuId={ ref } />
+				<MenuInspectorControls
+					clientId={ clientId }
+					convertClassicMenu={ convertClassicMenu }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					currentMenuId={ ref }
+					handleUpdateMenu={ handleUpdateMenu }
+					isNavigationMenuMissing={ isNavigationMenuMissing }
+					innerBlocks={ innerBlocks }
+					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+					onCreateNew={ createUntitledEmptyNavigationMenu }
+				/>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
@@ -770,7 +709,19 @@ function Navigation( {
 	if ( ref && isNavigationMenuMissing ) {
 		return (
 			<TagName { ...blockProps }>
-				<MenuInspectorControls />
+				<MenuInspectorControls
+					clientId={ clientId }
+					convertClassicMenu={ convertClassicMenu }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					handleUpdateMenu={ handleUpdateMenu }
+					isNavigationMenuMissing={ isNavigationMenuMissing }
+					innerBlocks={ innerBlocks }
+					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+					onCreateNew={ createUntitledEmptyNavigationMenu }
+				/>
 				<Warning>
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
@@ -845,7 +796,20 @@ function Navigation( {
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
-				<MenuInspectorControls currentMenuId={ ref } />
+				<MenuInspectorControls
+					clientId={ clientId }
+					convertClassicMenu={ convertClassicMenu }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					currentMenuId={ ref }
+					handleUpdateMenu={ handleUpdateMenu }
+					isNavigationMenuMissing={ isNavigationMenuMissing }
+					innerBlocks={ innerBlocks }
+					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+					onCreateNew={ createUntitledEmptyNavigationMenu }
+				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
new file mode 100644
index 0000000000000..9f92d130ff14d
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalOffCanvasEditor as OffCanvasEditor,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ManageMenusButton from './manage-menus-button';
+import NavigationMenuSelector from './navigation-menu-selector';
+
+const WrappedNavigationMenuSelector = ( {
+	clientId,
+	currentMenuId,
+	handleUpdateMenu,
+	convertClassicMenu,
+	onCreateNew,
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+} ) => (
+	<NavigationMenuSelector
+		currentMenuId={ currentMenuId }
+		clientId={ clientId }
+		onSelectNavigationMenu={ ( menuId ) => {
+			handleUpdateMenu( menuId );
+		} }
+		onSelectClassicMenu={ async ( classicMenu ) => {
+			const navMenu = await convertClassicMenu(
+				classicMenu.id,
+				classicMenu.name,
+				'draft'
+			);
+			if ( navMenu ) {
+				handleUpdateMenu( navMenu.id, {
+					focusNavigationBlock: true,
+				} );
+			}
+		} }
+		onCreateNew={ onCreateNew }
+		createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+		createNavigationMenuIsError={ createNavigationMenuIsError }
+		/* translators: %s: The name of a menu. */
+		actionLabel={ __( "Switch to '%s'" ) }
+	/>
+);
+const MenuInspectorControls = ( {
+	clientId,
+	convertClassicMenu,
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+	currentMenuId = null,
+	handleUpdateMenu,
+	isNavigationMenuMissing,
+	innerBlocks,
+	isManageMenusButtonDisabled,
+	onCreateNew,
+} ) => {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={
+					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
+				}
+			>
+				{ isOffCanvasNavigationEditorEnabled ? (
+					<>
+						<HStack className="wp-block-navigation-off-canvas-editor__header">
+							<Heading
+								className="wp-block-navigation-off-canvas-editor__title"
+								level={ 2 }
+							>
+								{ __( 'Menu' ) }
+							</Heading>
+							<WrappedNavigationMenuSelector
+								clientId={ clientId }
+								currentMenuId={ currentMenuId }
+								handleUpdateMenu={ handleUpdateMenu }
+								convertClassicMenu={ convertClassicMenu }
+								onCreateNew={ onCreateNew }
+								createNavigationMenuIsSuccess={
+									createNavigationMenuIsSuccess
+								}
+								createNavigationMenuIsError={
+									createNavigationMenuIsError
+								}
+							/>
+						</HStack>
+						{ currentMenuId && isNavigationMenuMissing ? (
+							<p>{ __( 'Select or create a menu' ) }</p>
+						) : (
+							<OffCanvasEditor
+								blocks={ innerBlocks }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+					</>
+				) : (
+					<>
+						<WrappedNavigationMenuSelector
+							clientId={ clientId }
+							currentMenuId={ currentMenuId }
+							handleUpdateMenu={ handleUpdateMenu }
+							convertClassicMenu={ convertClassicMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+						/>
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+						/>
+					</>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default MenuInspectorControls;