diff --git a/packages/edit-navigation/src/components/name-display/index.js b/packages/edit-navigation/src/components/name-display/index.js
index 18e6d41eb37fe..52d04e55a783b 100644
--- a/packages/edit-navigation/src/components/name-display/index.js
+++ b/packages/edit-navigation/src/components/name-display/index.js
@@ -4,6 +4,10 @@
 import { useContext } from '@wordpress/element';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { BlockControls } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { sprintf, __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -13,9 +17,13 @@ import {
 	useMenuEntityProp,
 	IsMenuNameControlFocusedContext,
 } from '../../hooks';
+import {
+	COMPLEMENTARY_AREA_SCOPE,
+	COMPLEMENTARY_AREA_ID,
+} from '../../constants';
 
-import { sprintf, __ } from '@wordpress/i18n';
 export default function NameDisplay() {
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const [ menuId ] = useSelectedMenuId();
 	const [ name ] = useMenuEntityProp( 'name', menuId );
 	const [ , setIsMenuNameEditFocused ] = useContext(
@@ -33,7 +41,13 @@ export default function NameDisplay() {
 						__( `Edit menu name: %s` ),
 						menuName
 					) }
-					onClick={ () => setIsMenuNameEditFocused( true ) }
+					onClick={ () => {
+						enableComplementaryArea(
+							COMPLEMENTARY_AREA_SCOPE,
+							COMPLEMENTARY_AREA_ID
+						);
+						setIsMenuNameEditFocused( true );
+					} }
 				>
 					{ menuName }
 				</ToolbarButton>