diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 273ac75dd65f3..2822b03081f02 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -4,7 +4,11 @@
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [ "menu", "navigation", "links" ],
+	"keywords": [
+		"menu",
+		"navigation",
+		"links"
+	],
 	"textdomain": "default",
 	"attributes": {
 		"orientation": {
@@ -36,13 +40,13 @@
 			"type": "boolean",
 			"default": true
 		},
-		"openSubmenusOnClick":{
+		"openSubmenusOnClick": {
 			"type": "boolean",
 			"default": false
 		},
-		"isResponsive": {
-			"type": "boolean",
-			"default": false
+		"overlayMenu": {
+			"type": "string",
+			"default": "never"
 		},
 		"__unstableLocation": {
 			"type": "string"
@@ -77,7 +81,10 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [ "wide", "full" ],
+		"align": [
+			"wide",
+			"full"
+		],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js
index 0ee64c0a44da8..f41acc381bda6 100644
--- a/packages/block-library/src/navigation/deprecated.js
+++ b/packages/block-library/src/navigation/deprecated.js
@@ -15,7 +15,92 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
-export default [
+const deprecated = [
+	// Remove `isResponsive` attribute.
+	{
+		attributes: {
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			rgbTextColor: {
+				type: 'string',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			rgbBackgroundColor: {
+				type: 'string',
+			},
+			itemsJustification: {
+				type: 'string',
+			},
+			showSubmenuIcon: {
+				type: 'boolean',
+				default: true,
+			},
+			openSubmenusOnClick: {
+				type: 'boolean',
+				default: false,
+			},
+			isResponsive: {
+				type: 'boolean',
+				default: 'false',
+			},
+			__unstableLocation: {
+				type: 'string',
+			},
+			overlayBackgroundColor: {
+				type: 'string',
+			},
+			customOverlayBackgroundColor: {
+				type: 'string',
+			},
+			overlayTextColor: {
+				type: 'string',
+			},
+			customOverlayTextColor: {
+				type: 'string',
+			},
+		},
+		supports: {
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			html: false,
+			inserter: true,
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalTextTransform: true,
+				__experimentalFontFamily: true,
+				__experimentalTextDecoration: true,
+			},
+		},
+		isEligible( attributes ) {
+			return attributes.isResponsive;
+		},
+		migrate( attributes ) {
+			delete attributes.isResponsive;
+			return {
+				...attributes,
+				overlayMenu: 'mobile',
+			};
+		},
+		save() {
+			return <InnerBlocks.Content />;
+		},
+	},
 	{
 		attributes: {
 			orientation: {
@@ -163,3 +248,5 @@ export default [
 		},
 	},
 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d5ef92a4c894f..77740d91a619d 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -26,7 +26,13 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -135,7 +141,7 @@ function Navigation( {
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
-			'is-responsive': attributes.isResponsive,
+			'is-responsive': 'never' !== attributes.overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',
@@ -271,16 +277,34 @@ function Navigation( {
 			{ navigatorModal }
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display settings' ) }>
-						<ToggleControl
-							checked={ attributes.isResponsive }
-							onChange={ ( value ) => {
-								setAttributes( {
-									isResponsive: value,
-								} );
-							} }
-							label={ __( 'Enable responsive menu' ) }
-						/>
+					<PanelBody title={ __( 'Display' ) }>
+						<h3>{ __( 'Overlay Menu' ) }</h3>
+						<ToggleGroupControl
+							label={ __( 'Configure overlay menu' ) }
+							value={ attributes.overlayMenu }
+							help={ __(
+								'Collapses the navigation options in a menu icon opening an overlay.'
+							) }
+							onChange={ ( value ) =>
+								setAttributes( { overlayMenu: value } )
+							}
+							isBlock
+							hideLabelFromVision
+						>
+							<ToggleGroupControlOption
+								value="never"
+								label={ __( 'Off' ) }
+							/>
+							<ToggleGroupControlOption
+								value="mobile"
+								label={ __( 'Mobile' ) }
+							/>
+							<ToggleGroupControlOption
+								value="always"
+								label={ __( 'Always' ) }
+							/>
+						</ToggleGroupControl>
+						<h3>{ __( 'Submenus' ) }</h3>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
@@ -288,7 +312,7 @@ function Navigation( {
 									openSubmenusOnClick: value,
 								} );
 							} }
-							label={ __( 'Open submenus on click' ) }
+							label={ __( 'Open on click' ) }
 						/>
 						{ ! attributes.openSubmenusOnClick && (
 							<ToggleControl
@@ -298,7 +322,7 @@ function Navigation( {
 										showSubmenuIcon: value,
 									} );
 								} }
-								label={ __( 'Show submenu indicator icons' ) }
+								label={ __( 'Show icons' ) }
 							/>
 						) }
 					</PanelBody>
@@ -352,7 +376,8 @@ function Navigation( {
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
-					isResponsive={ attributes.isResponsive }
+					isResponsive={ 'never' !== attributes.overlayMenu }
+					isHiddenByDefault={ 'always' === attributes.overlayMenu }
 				>
 					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 07afc4ceb4394..5906cbe799322 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -397,12 +397,6 @@ $color-control-label-height: 20px;
 		}
 	}
 }
-.components-button.wp-block-navigation__responsive-container-open {
-	@include break-small {
-		display: none;
-	}
-}
-
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 5b4b03f3a420d..32c3fbea0ef46 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
+	/**
+	 * This is for backwards compatibility after `isResponsive` attribute has been removed.
+	 */
+	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
+	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
+	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -250,7 +255,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['isResponsive'] ) && true === $attributes['isResponsive'] ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,7 +293,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
-	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
+	if ( ! $is_responsive_menu ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
@@ -296,9 +301,20 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		);
 	}
 
+	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+
+	$responsive_container_classes = array(
+		'wp-block-navigation__responsive-container',
+		$is_hidden_by_default ? 'hidden-by-default' : '',
+	);
+	$open_button_classes          = array(
+		'wp-block-navigation__responsive-container-open',
+		$is_hidden_by_default ? 'always-shown' : '',
+	);
+
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="wp-block-navigation__responsive-container" id="modal-%1$s" aria-hidden="true">
+		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+			<div class="%5$s" id="modal-%1$s" aria-hidden="true">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
@@ -311,7 +327,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$modal_unique_id,
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
-		__( 'Close menu' ) // Close button label.
+		__( 'Close menu' ), // Close button label.
+		implode( ' ', $responsive_container_classes ),
+		implode( ' ', $open_button_classes )
 	);
 
 	return sprintf(
diff --git a/packages/block-library/src/navigation/responsive-wrapper.js b/packages/block-library/src/navigation/responsive-wrapper.js
index b29cdbdef7c90..7030e8e7914ab 100644
--- a/packages/block-library/src/navigation/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/responsive-wrapper.js
@@ -17,6 +17,7 @@ export default function ResponsiveWrapper( {
 	isOpen,
 	isResponsive,
 	onToggle,
+	isHiddenByDefault,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -25,8 +26,13 @@ export default function ResponsiveWrapper( {
 		'wp-block-navigation__responsive-container',
 		{
 			'is-menu-open': isOpen,
+			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+	const openButtonClasses = classnames(
+		'wp-block-navigation__responsive-container-open',
+		{ 'always-shown': isHiddenByDefault }
+	);
 
 	const modalId = `${ id }-modal`;
 
@@ -37,7 +43,7 @@ export default function ResponsiveWrapper( {
 					aria-haspopup="true"
 					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
-					className="wp-block-navigation__responsive-container-open"
+					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
 					<SVG
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index bcd241248cdd9..a6cd74ad311d9 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -505,16 +505,18 @@
 	}
 
 	@include break-small() {
-		&:not(.is-menu-open) {
-			display: flex;
-			flex-direction: row;
-			width: 100%;
-			position: relative;
-			z-index: 2;
-			background-color: inherit;
-
-			.wp-block-navigation__responsive-container-close {
-				display: none;
+		&:not(.hidden-by-default) {
+			&:not(.is-menu-open) {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				position: relative;
+				z-index: 2;
+				background-color: inherit;
+
+				.wp-block-navigation__responsive-container-close {
+					display: none;
+				}
 			}
 		}
 
@@ -558,8 +560,10 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	@include break-small {
-		display: none;
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
 	}
 
 	// Justify the button.
diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
index 8edeead41f226..c7fdf79251746 100644
--- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -598,7 +598,7 @@ describe( 'Navigation', () => {
 		await toggleSidebar();
 
 		const [ openOnClickButton ] = await page.$x(
-			'//label[contains(text(),"Open submenus on click")]'
+			'//label[contains(text(),"Open on click")]'
 		);
 
 		await openOnClickButton.click();
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index d28e16f3d384f..a3e7dc949ca12 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -35,13 +35,21 @@
 		margin-top: 0;
 	}
 
-	h2,
-	h3 {
+	h2 {
 		font-size: $default-font-size;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
 
+	// Subheading style.
+	h3 {
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+		color: $gray-900;
+		margin-bottom: 1.5em;
+	}
+
 	hr {
 		border-top: none;
 		border-bottom: 1px solid $gray-100;
diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
index 4378f2605bc61..a770861fd7824 100644
--- a/test/integration/fixtures/blocks/core__navigation.json
+++ b/test/integration/fixtures/blocks/core__navigation.json
@@ -7,7 +7,7 @@
 			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
-			"isResponsive": false
+			"overlayMenu": "never"
 		},
 		"innerBlocks": [],
 		"originalContent": ""
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.html
new file mode 100644
index 0000000000000..8640ce41324a0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.html
@@ -0,0 +1,3 @@
+<!-- wp:navigation {"isResponsive":true} -->
+<!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
+<!-- /wp:navigation -->
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
new file mode 100644
index 0000000000000..11b24a32fbe66
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
@@ -0,0 +1,28 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/navigation",
+		"isValid": true,
+		"attributes": {
+			"orientation": "horizontal",
+			"showSubmenuIcon": true,
+			"openSubmenusOnClick": false,
+			"overlayMenu": "mobile"
+		},
+		"innerBlocks": [
+			{
+				"clientId": "_clientId_0",
+				"name": "core/navigation-link",
+				"isValid": true,
+				"attributes": {
+					"label": "WordPress",
+					"opensInNewTab": false,
+					"url": "https://www.wordpress.org/"
+				},
+				"innerBlocks": [],
+				"originalContent": ""
+			}
+		],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..38dcb1daf2af1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json
@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/navigation",
+		"attrs": {
+			"isResponsive": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/navigation-link",
+				"attrs": {
+					"label": "WordPress",
+					"url": "https://www.wordpress.org/"
+				},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			}
+		],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n", null, "\n" ]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..93177274b56cd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:navigation {"overlayMenu":"mobile"} -->
+<!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
+<!-- /wp:navigation -->