diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 68b4349197a8b..8475ed82982b5 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -476,6 +476,15 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
 -	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url
 
+## Navigation Overlay
+
+Display your navigation in an overlay. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay))
+
+-	**Name:** core/navigation-overlay
+-	**Category:** navigation, theme, design
+-	**Supports:** inserter
+-	**Attributes:** 
+
 ## Submenu
 
 Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu))
diff --git a/lib/blocks.php b/lib/blocks.php
index 698b5d6873748..013e985da3d95 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -80,6 +80,7 @@ function gutenberg_reregister_core_block_types() {
 				'loginout.php'                     => 'core/loginout',
 				'navigation.php'                   => 'core/navigation',
 				'navigation-link.php'              => 'core/navigation-link',
+				'navigation-overlay.php'              => 'core/navigation-overlay',
 				'navigation-submenu.php'           => 'core/navigation-submenu',
 				'page-list.php'                    => 'core/page-list',
 				'page-list-item.php'               => 'core/page-list-item',
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index e2e0fd9e414ef..6694dea344400 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -68,6 +68,7 @@ import * as missing from './missing';
 import * as more from './more';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
+import * as navigationOverlay from './navigation-overlay';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
@@ -185,6 +186,7 @@ const getAllBlocks = () => {
 		// theme blocks
 		navigation,
 		navigationLink,
+		navigationOverlay,
 		navigationSubmenu,
 		siteLogo,
 		siteTitle,
diff --git a/packages/block-library/src/navigation-overlay/block.json b/packages/block-library/src/navigation-overlay/block.json
new file mode 100644
index 0000000000000..5964934266205
--- /dev/null
+++ b/packages/block-library/src/navigation-overlay/block.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/navigation-overlay",
+	"title": "Navigation Overlay",
+	"category": "navigation, theme, design",
+	"description": "Display your navigation in an overlay.",
+	"supports": {
+		"inserter": true
+	},
+	"textdomain": "default",
+	"attributes": {}
+}
diff --git a/packages/block-library/src/navigation-overlay/edit.js b/packages/block-library/src/navigation-overlay/edit.js
new file mode 100644
index 0000000000000..ac7a0f0ee142a
--- /dev/null
+++ b/packages/block-library/src/navigation-overlay/edit.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const NavigationOverlayEdit = () => {
+	const props = useBlockProps();
+
+	return (
+		<>
+			<div { ...props }>hello</div>
+		</>
+	);
+};
+
+export default NavigationOverlayEdit;
diff --git a/packages/block-library/src/navigation-overlay/index.js b/packages/block-library/src/navigation-overlay/index.js
new file mode 100644
index 0000000000000..e8994180ba712
--- /dev/null
+++ b/packages/block-library/src/navigation-overlay/index.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import NavigationOverlayEdit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	edit: NavigationOverlayEdit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/navigation-overlay/index.php b/packages/block-library/src/navigation-overlay/index.php
new file mode 100644
index 0000000000000..3f123216fc07a
--- /dev/null
+++ b/packages/block-library/src/navigation-overlay/index.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Server-side rendering of the `core/overlay` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ *  Registers the `core/navigation-overlay` block on the server.
+ */
+function register_block_core_navigation_overlay() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-overlay',
+		array(
+			'render_callback' => 'render_block_core_navigation_overlay',
+		)
+	);
+}
+
+/**
+ * Renders the `core/navigation-overlay` block on the server.
+ *
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Returns the output of the overlay.
+ */
+function render_block_core_navigation_overlay( $attributes ) {
+	return 'navigation overlay';
+}
+
+add_action( 'init', 'register_block_core_navigation_overlay' );
diff --git a/packages/block-library/src/navigation-overlay/init.js b/packages/block-library/src/navigation-overlay/init.js
new file mode 100644
index 0000000000000..a7f22ef02d640
--- /dev/null
+++ b/packages/block-library/src/navigation-overlay/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from '.';
+
+export default init();