diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index ea8b7f7dd84775..d347e2711b413a 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -415,23 +415,27 @@ function Navigation( {
 							}
 						/>
 					) }
-					<ResponsiveWrapper
-						id={ clientId }
-						onToggle={ setResponsiveMenuVisibility }
-						isOpen={ isResponsiveMenuOpen }
-						isResponsive={ 'never' !== overlayMenu }
-						isHiddenByDefault={ 'always' === overlayMenu }
-					>
-						{ isEntityAvailable && (
-							<NavigationInnerBlocks
-								isVisible={ ! isPlaceholderShown }
-								clientId={ clientId }
-								appender={ CustomAppender }
-								hasCustomPlaceholder={ !! CustomPlaceholder }
-								orientation={ orientation }
-							/>
-						) }
-					</ResponsiveWrapper>
+					{ ! isPlaceholderShown && (
+						<ResponsiveWrapper
+							id={ clientId }
+							onToggle={ setResponsiveMenuVisibility }
+							isOpen={ isResponsiveMenuOpen }
+							isResponsive={ 'never' !== overlayMenu }
+							isHiddenByDefault={ 'always' === overlayMenu }
+						>
+							{ isEntityAvailable && (
+								<NavigationInnerBlocks
+									isVisible={ ! isPlaceholderShown }
+									clientId={ clientId }
+									appender={ CustomAppender }
+									hasCustomPlaceholder={
+										!! CustomPlaceholder
+									}
+									orientation={ orientation }
+								/>
+							) }
+						</ResponsiveWrapper>
+					) }
 				</nav>
 			</RecursionProvider>
 		</EntityProvider>
diff --git a/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js b/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js
deleted file mode 100644
index 33f36c8ecd2a99..00000000000000
--- a/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import {
-	Placeholder,
-	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Spinner,
-} from '@wordpress/components';
-
-import {
-	forwardRef,
-	useCallback,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { navigation, chevronDown, Icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import useNavigationEntities from '../../use-navigation-entities';
-import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from '../../menu-items-to-blocks';
-
-function CreateInnerBlocksStep( { onFinish }, ref ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-
-	const {
-		isResolvingPages,
-		menus,
-		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
-		hasPages,
-		hasMenus,
-	} = useNavigationEntities( selectedMenu );
-
-	const isLoading = isResolvingPages || isResolvingMenus;
-
-	const createFromMenu = useCallback( () => {
-		const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-		onFinish( blocks );
-	}, [ menuItems, menuItemsToBlocks, onFinish ] );
-
-	const onCreateFromMenu = () => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu();
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-	};
-
-	const onCreateEmptyMenu = () => {
-		onFinish( [] );
-	};
-
-	const onCreateAllPages = () => {
-		const block = [ createBlock( 'core/page-list' ) ];
-		onFinish( block );
-	};
-
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu();
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems ] );
-
-	const toggleProps = {
-		variant: 'primary',
-		className: 'wp-block-navigation-placeholder__actions__dropdown',
-	};
-	return (
-		<Placeholder className="wp-block-navigation-placeholder">
-			<PlaceholderPreview />
-
-			<div className="wp-block-navigation-placeholder__controls">
-				{ isLoading && (
-					<div ref={ ref }>
-						<Spinner />
-					</div>
-				) }
-				{ ! isLoading && (
-					<div
-						ref={ ref }
-						className="wp-block-navigation-placeholder__actions"
-					>
-						<div className="wp-block-navigation-placeholder__actions__indicator">
-							<Icon icon={ navigation } /> { __( 'Navigation' ) }
-						</div>
-						{ hasMenus ? (
-							<DropdownMenu
-								text={ __( 'Add existing menu' ) }
-								icon={ chevronDown }
-								toggleProps={ toggleProps }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										{ menus.map( ( menu ) => {
-											return (
-												<MenuItem
-													onClick={ () => {
-														setSelectedMenu(
-															menu.id
-														);
-														onCreateFromMenu();
-													} }
-													onClose={ onClose }
-													key={ menu.id }
-												>
-													{ menu.name }
-												</MenuItem>
-											);
-										} ) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) : undefined }
-						{ hasPages ? (
-							<Button
-								variant={ hasMenus ? 'tertiary' : 'primary' }
-								onClick={ onCreateAllPages }
-							>
-								{ __( 'Add all pages' ) }
-							</Button>
-						) : undefined }
-						<Button
-							variant="tertiary"
-							onClick={ onCreateEmptyMenu }
-						>
-							{ __( 'Start empty' ) }
-						</Button>
-					</div>
-				) }
-			</div>
-		</Placeholder>
-	);
-}
-
-export default forwardRef( CreateInnerBlocksStep );
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 1306f24ad812e2..9c19c88e309a16 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -1,32 +1,107 @@
 /**
  * WordPress dependencies
  */
-import { serialize } from '@wordpress/blocks';
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Placeholder,
+	Button,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-const PLACEHOLDER_STEPS = {
-	selectNavigationPost: 1,
-	createInnerBlocks: 2,
-};
+import { navigation, chevronDown, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import SelectNavigationMenuStep from './select-navigation-menu-step';
-import CreateInnerBlocksStep from './create-inner-blocks-step';
 
-export default function Placeholder( {
+import useNavigationEntities from '../../use-navigation-entities';
+import PlaceholderPreview from './placeholder-preview';
+import menuItemsToBlocks from '../../menu-items-to-blocks';
+import NavigationMenuNameModal from '../navigation-menu-name-modal';
+import useNavigationMenu from '../../use-navigation-menu';
+
+const ExistingMenusDropdown = ( {
+	canSwitchNavigationMenu,
+	navigationMenus,
+	setSelectedMenu,
+	onFinish,
+	menus,
+	onCreateFromMenu,
+} ) => {
+	const toggleProps = {
+		variant: 'primary',
+		className: 'wp-block-navigation-placeholder__actions__dropdown',
+	};
+	return (
+		<DropdownMenu
+			text={ __( 'Select existing menu' ) }
+			icon={ chevronDown }
+			toggleProps={ toggleProps }
+			popoverProps={ { isAlternate: true } }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup label="Menus">
+						{ canSwitchNavigationMenu &&
+							navigationMenus.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											setSelectedMenu( menu.id );
+											onFinish( menu );
+										} }
+										onClose={ onClose }
+										key={ menu.id }
+									>
+										{ menu.title.rendered }
+									</MenuItem>
+								);
+							} ) }
+					</MenuGroup>
+					<MenuGroup label="Classic Menus">
+						{ menus.map( ( menu ) => {
+							return (
+								<MenuItem
+									onClick={ () => {
+										setSelectedMenu( menu.id );
+										onCreateFromMenu( menu.name );
+									} }
+									onClose={ onClose }
+									key={ menu.id }
+								>
+									{ menu.name }
+								</MenuItem>
+							);
+						} ) }
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+};
+
+export default function NavigationPlaceholder( {
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenu,
 } ) {
-	const [ step, setStep ] = useState(
-		PLACEHOLDER_STEPS.selectNavigationPost
+	const [ selectedMenu, setSelectedMenu ] = useState();
+
+	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
+
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(
+		false
 	);
-	const [ navigationMenuTitle, setNavigationMenuTitle ] = useState( '' );
+
+	const [ createEmpty, setCreateEmpty ] = useState( false );
+
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	// This callback uses data from the two placeholder steps and only creates
@@ -50,30 +125,131 @@ export default function Placeholder( {
 		[ serialize, saveEntityRecord ]
 	);
 
+	const onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => {
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onFinish( navigationMenu );
+	};
+
+	const {
+		isResolvingPages,
+		menus,
+		isResolvingMenus,
+		menuItems,
+		hasResolvedMenuItems,
+		hasPages,
+		hasMenus,
+	} = useNavigationEntities( selectedMenu );
+
+	const isStillLoading = isResolvingPages || isResolvingMenus;
+
+	const createFromMenu = useCallback(
+		( name ) => {
+			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+			onFinishMenuCreation( name, blocks );
+		},
+		[ menuItems, menuItemsToBlocks, onFinish ]
+	);
+
+	const onCreateFromMenu = ( name ) => {
+		// If we have menu items, create the block right away.
+		if ( hasResolvedMenuItems ) {
+			createFromMenu( name );
+			return;
+		}
+
+		// Otherwise, create the block when resolution finishes.
+		setIsCreatingFromMenu( true );
+		// Store the name to use later.
+		setMenuName( name );
+	};
+
+	const onCreateEmptyMenu = ( name ) => {
+		onFinishMenuCreation( name, [] );
+	};
+
+	const onCreateAllPages = ( name ) => {
+		const block = [ createBlock( 'core/page-list' ) ];
+		onFinishMenuCreation( name, block );
+		setIsNewMenuModalVisible( true );
+	};
+
+	useEffect( () => {
+		// If the user selected a menu but we had to wait for menu items to
+		// finish resolving, then create the block once resolution finishes.
+		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
+			createFromMenu( menuName );
+			setIsCreatingFromMenu( false );
+		}
+	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
+
+	const { navigationMenus } = useNavigationMenu();
+
 	return (
 		<>
-			{ step === PLACEHOLDER_STEPS.selectNavigationPost && (
-				<SelectNavigationMenuStep
-					onCreateNew={ ( newTitle ) => {
-						setNavigationMenuTitle( newTitle );
-						setStep( PLACEHOLDER_STEPS.createInnerBlocks );
-					} }
-					onSelectExisting={ ( navigationMenu ) => {
-						onFinish( navigationMenu );
-					} }
-					canSwitchNavigationMenu={ canSwitchNavigationMenu }
-					hasResolvedNavigationMenu={ hasResolvedNavigationMenu }
-				/>
+			{ ( ! hasResolvedNavigationMenu || isStillLoading ) && (
+				<PlaceholderPreview isLoading />
+			) }
+			{ hasResolvedNavigationMenu && ! isStillLoading && (
+				<Placeholder className="wp-block-navigation-placeholder">
+					<PlaceholderPreview />
+					<div className="wp-block-navigation-placeholder__controls">
+						<div className="wp-block-navigation-placeholder__actions">
+							<div className="wp-block-navigation-placeholder__actions__indicator">
+								<Icon icon={ navigation } />{ ' ' }
+								{ __( 'Navigation' ) }
+							</div>
+							{ hasMenus || navigationMenus.length ? (
+								<ExistingMenusDropdown
+									canSwitchNavigationMenu={
+										canSwitchNavigationMenu
+									}
+									navigationMenus={ navigationMenus }
+									setSelectedMenu={ setSelectedMenu }
+									onFinish={ onFinish }
+									menus={ menus }
+									onCreateFromMenu={ onCreateFromMenu }
+								/>
+							) : undefined }
+							{ hasPages ? (
+								<Button
+									variant={
+										hasMenus || canSwitchNavigationMenu
+											? 'tertiary'
+											: 'primary'
+									}
+									onClick={ () => {
+										setIsNewMenuModalVisible( true );
+										setCreateEmpty( false );
+									} }
+								>
+									{ __( 'Add all pages' ) }
+								</Button>
+							) : undefined }
+							<Button
+								variant="tertiary"
+								onClick={ () => {
+									setIsNewMenuModalVisible( true );
+									setCreateEmpty( true );
+								} }
+							>
+								{ __( 'Start empty' ) }
+							</Button>
+						</div>
+					</div>
+				</Placeholder>
 			) }
-			{ step === PLACEHOLDER_STEPS.createInnerBlocks && (
-				<CreateInnerBlocksStep
-					onFinish={ async ( blocks ) => {
-						const navigationMenu = await createNavigationMenu(
-							navigationMenuTitle,
-							blocks
-						);
-						onFinish( navigationMenu );
+			{ isNewMenuModalVisible && (
+				<NavigationMenuNameModal
+					title={ __( 'Create your new navigation menu' ) }
+					onRequestClose={ () => {
+						setIsNewMenuModalVisible( false );
 					} }
+					onFinish={
+						createEmpty ? onCreateEmptyMenu : onCreateAllPages
+					}
 				/>
 			) }
 		</>
diff --git a/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js b/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js
deleted file mode 100644
index 1d8c468577c4ac..00000000000000
--- a/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { Button, Dropdown, Placeholder } from '@wordpress/components';
-import { navigation as navigationIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import PlaceholderPreview from './placeholder-preview';
-import NavigationMenuSelector from '../navigation-menu-selector';
-import NavigationMenuNameModal from '../navigation-menu-name-modal';
-
-export default function SelectNavigationMenuStep( {
-	canSwitchNavigationMenu,
-	hasResolvedNavigationMenu,
-	onCreateNew,
-	onSelectExisting,
-} ) {
-	const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(
-		false
-	);
-
-	return (
-		<>
-			{ ! hasResolvedNavigationMenu && <PlaceholderPreview isLoading /> }
-			{ hasResolvedNavigationMenu && (
-				<Placeholder
-					icon={ navigationIcon }
-					label={ __( 'Navigation' ) }
-					instructions={
-						canSwitchNavigationMenu
-							? __(
-									'Choose an existing navigation menu or create a new one.'
-							  )
-							: __( 'New navigation menu.' )
-					}
-				>
-					{ canSwitchNavigationMenu && (
-						<Dropdown
-							contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
-							position="bottom right left"
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									variant="primary"
-									onClick={ onToggle }
-									aria-expanded={ isOpen }
-								>
-									{ __( 'Choose existing' ) }
-								</Button>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<NavigationMenuSelector
-									onSelect={ onSelectExisting }
-									onClose={ onClose }
-								/>
-							) }
-						/>
-					) }
-					<Button
-						variant={
-							canSwitchNavigationMenu ? 'tertiary' : 'primary'
-						}
-						onClick={ () => {
-							setIsNewMenuModalVisible( true );
-						} }
-					>
-						{ __( 'New menu' ) }
-					</Button>
-				</Placeholder>
-			) }
-			{ isNewMenuModalVisible && (
-				<NavigationMenuNameModal
-					title={ __( 'Create your new navigation menu' ) }
-					onRequestClose={ () => {
-						setIsNewMenuModalVisible( false );
-					} }
-					onFinish={ onCreateNew }
-				/>
-			) }
-		</>
-	);
-}