diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
index 35ce30effb9bc3..88f470ca25e879 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -7,13 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useState, useEffect, useRef } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import ContentNavigation from './content-navigation';
 import TemplatesNavigation from './templates-navigation';
-import { useSelect } from '@wordpress/data';
 import { MENU_ROOT } from './constants';
 import { store as editSiteStore } from '../../../store';
 
@@ -41,13 +42,24 @@ const NavigationPanel = ( { isOpen } ) => {
 		}
 	}, [ templatesActiveMenu ] );
 
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
+
+	const closeOnEscape = ( event ) => {
+		if ( event.keyCode === ESCAPE ) {
+			event.stopPropagation();
+			setIsNavigationPanelOpened( false );
+		}
+	};
+
 	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className={ classnames( `edit-site-navigation-panel`, {
 				'is-open': isOpen,
 			} ) }
 			ref={ panelRef }
 			tabIndex="-1"
+			onKeyDown={ closeOnEscape }
 		>
 			<div className="edit-site-navigation-panel__inner">
 				<div className="edit-site-navigation-panel__site-title-container">