diff --git a/package-lock.json b/package-lock.json
index 13c91692d0d5c9..d0a133d4eedfe5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11113,6 +11113,7 @@
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 				"@wordpress/media-utils": "file:packages/media-utils",
 				"@wordpress/notices": "file:packages/notices",
+				"classnames": "^2.2.5",
 				"lodash": "^4.17.15",
 				"rememo": "^3.0.0"
 			}
diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json
index e7e79bf4b4066c..79cfa3da5bab1e 100644
--- a/packages/edit-navigation/package.json
+++ b/packages/edit-navigation/package.json
@@ -36,6 +36,7 @@
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
+		"classnames": "^2.2.5",
 		"lodash": "^4.17.15",
 		"rememo": "^3.0.0"
 	},
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index a79bbc922917ff..8459c6d45349f3 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -23,7 +23,6 @@ export default function Layout( { blockEditorSettings } ) {
 				<DropZoneProvider>
 					<FocusReturnProvider>
 						{ /* <Notices /> */ }
-						<Popover.Slot name="block-toolbar" />
 						<TabPanel
 							className="edit-navigation-layout__tab-panel"
 							tabs={ [
diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
new file mode 100644
index 00000000000000..2d4c6ad44abc6a
--- /dev/null
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockList,
+	BlockToolbar,
+	NavigableToolbar,
+	ObserveTyping,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+export default function BlockEditorPanel( { saveBlocks } ) {
+	const { isNavigationModeActive, hasSelectedBlock } = useSelect(
+		( select ) => {
+			const {
+				isNavigationMode,
+				getBlockSelectionStart,
+				getBlock,
+			} = select( 'core/block-editor' );
+
+			const selectionStartClientId = getBlockSelectionStart();
+
+			return {
+				isNavigationModeActive: isNavigationMode(),
+				hasSelectedBlock:
+					!! selectionStartClientId &&
+					!! getBlock( selectionStartClientId ),
+			};
+		},
+		[]
+	);
+
+	return (
+		<Panel
+			header={
+				<Button isPrimary onClick={ saveBlocks }>
+					{ __( 'Save navigation' ) }
+				</Button>
+			}
+		>
+			<PanelBody title={ __( 'Navigation menu' ) }>
+				<NavigableToolbar
+					className={ classnames(
+						'edit-navigation-menu-editor__block-editor-toolbar',
+						{
+							'is-hidden': isNavigationModeActive,
+						}
+					) }
+					aria-label={ __( 'Block tools' ) }
+				>
+					{ hasSelectedBlock && <BlockToolbar hideDragHandle /> }
+				</NavigableToolbar>
+				<Popover.Slot name="block-toolbar" />
+				<WritingFlow>
+					<ObserveTyping>
+						<BlockList />
+					</ObserveTyping>
+				</WritingFlow>
+			</PanelBody>
+		</Panel>
+	);
+}
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
index 5ac2a1959e0201..3e8297bdf54038 100644
--- a/packages/edit-navigation/src/components/menu-editor/index.js
+++ b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -4,13 +4,7 @@
 import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
-	BlockList,
-	ObserveTyping,
-	WritingFlow,
-	__experimentalBlockNavigationList,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, Button } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -18,6 +12,8 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import useNavigationBlocks from './use-navigation-blocks';
 import MenuEditorShortcuts from './shortcuts';
+import BlockEditorPanel from './block-editor-panel';
+import NavigationStructurePanel from './navigation-structure-panel';
 
 export default function MenuEditor( { menuId, blockEditorSettings } ) {
 	const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId );
@@ -35,42 +31,16 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 				settings={ {
 					...blockEditorSettings,
 					templateLock: 'all',
+					hasFixedToolbar: true,
 				} }
 			>
 				<BlockEditorKeyboardShortcuts />
 				<MenuEditorShortcuts saveBlocks={ saveBlocks } />
-				<Panel className="edit-navigation-menu-editor__panel">
-					<PanelBody
-						title={ __( 'Navigation structure' ) }
-						initialOpen={ isLargeViewport }
-					>
-						{ !! blocks.length && (
-							<__experimentalBlockNavigationList
-								blocks={ blocks }
-								selectedBlockClientId={ blocks[ 0 ].clientId }
-								selectBlock={ () => {} }
-								showNestedBlocks
-								showAppender
-							/>
-						) }
-					</PanelBody>
-				</Panel>
-				<Panel
-					header={
-						<Button isPrimary onClick={ saveBlocks }>
-							{ __( 'Save navigation' ) }
-						</Button>
-					}
-					className="edit-navigation-menu-editor__panel"
-				>
-					<PanelBody title={ __( 'Navigation menu' ) }>
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</PanelBody>
-				</Panel>
+				<NavigationStructurePanel
+					blocks={ blocks }
+					initialOpen={ isLargeViewport }
+				/>
+				<BlockEditorPanel saveBlocks={ saveBlocks } />
 			</BlockEditorProvider>
 		</div>
 	);
diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
new file mode 100644
index 00000000000000..68a105b4ee3caf
--- /dev/null
+++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
+import { Panel, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function NavigationStructurePanel( { blocks, initialOpen } ) {
+	return (
+		<Panel>
+			<PanelBody
+				title={ __( 'Navigation structure' ) }
+				initialOpen={ initialOpen }
+			>
+				{ !! blocks.length && (
+					<__experimentalBlockNavigationList
+						blocks={ blocks }
+						selectedBlockClientId={ blocks[ 0 ].clientId }
+						selectBlock={ () => {} }
+						showNestedBlocks
+						showAppender
+					/>
+				) }
+			</PanelBody>
+		</Panel>
+	);
+}
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
index 1c6ddda2c7bce6..588135bf34c892 100644
--- a/packages/edit-navigation/src/components/menu-editor/style.scss
+++ b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -5,4 +5,44 @@
 	@include break-medium {
 		grid-template-columns: 280px 1fr;
 	}
+
+	// Make the block list take up the full width of the panel.
+	.block-editor-block-list__layout.is-root-container {
+		padding: 0;
+	}
+}
+
+.edit-navigation-menu-editor__block-editor-toolbar {
+	height: 46px;
+	margin-bottom: 12px;
+	border: 1px solid #e2e4e7;
+
+	// Borders around toolbar segments.
+	.components-toolbar {
+		background: none;
+		// IE11 has thick paddings without this.
+		line-height: 0;
+
+		// These margins make the buttons themselves overlap the chrome of the toolbar.
+		// This helps make them square, and maximize the hit area.
+		margin-top: -$border-width;
+		margin-bottom: -$border-width;
+
+		// The component is born with a border, but we only need some of them.
+		border: 0;
+
+		// Add a border after item groups to show as separator in the block toolbar.
+		border-right: $border-width solid $light-gray-500;
+	}
+
+
+	// When entering navigation mode, hide the toolbar, but do so in a way where the
+	// outer container retains its height to avoid the blocks moving upwards.
+	&.is-hidden {
+		border-color: transparent;
+
+		.block-editor-block-toolbar {
+			display: none;
+		}
+	}
 }