diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index ff66be85b5cde..41f7bbd2dd015 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -34,6 +34,7 @@ export default function ResponsiveWrapper( {
 
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
+		'wp-overlay-component',
 		{
 			'has-text-color':
 				!! overlayTextColor.color || !! overlayTextColor?.class,
@@ -47,6 +48,7 @@ export default function ResponsiveWrapper( {
 				overlayBackgroundColor?.slug
 			) ]: !! overlayBackgroundColor?.slug,
 			'is-menu-open': isOpen,
+			'is-overlay-open': isOpen, // alias for new overlay specific style
 			'hidden-by-default': isHiddenByDefault,
 		}
 	);
@@ -61,13 +63,16 @@ export default function ResponsiveWrapper( {
 
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
+		'wp-overlay-component__open',
+		'wp-overlay-component__toggle',
 		{ 'always-shown': isHiddenByDefault }
 	);
 
 	const modalId = `${ id }-modal`;
 
 	const dialogProps = {
-		className: 'wp-block-navigation__responsive-dialog',
+		className:
+			'wp-block-navigation__responsive-dialog wp-overlay-component__dialog',
 		...( isOpen && {
 			role: 'dialog',
 			'aria-modal': true,
@@ -95,12 +100,17 @@ export default function ResponsiveWrapper( {
 				id={ modalId }
 			>
 				<div
-					className="wp-block-navigation__responsive-close"
+					className="wp-block-navigation__responsive-close wp-overlay-component__maybe-redundant"
 					tabIndex="-1"
 				>
 					<div { ...dialogProps }>
 						<Button
-							className="wp-block-navigation__responsive-container-close"
+							className={ classnames(
+								'wp-block-navigation__responsive-container-close',
+								'wp-overlay-component__close',
+								'wp-overlay-component__toggle',
+								{ 'always-shown': isHiddenByDefault }
+							) }
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
@@ -108,7 +118,7 @@ export default function ResponsiveWrapper( {
 							{ ! hasIcon && __( 'Close' ) }
 						</Button>
 						<div
-							className="wp-block-navigation__responsive-container-content"
+							className="wp-block-navigation__responsive-container-content wp-overlay-component__content"
 							id={ `${ modalId }-content` }
 						>
 							{ children }
diff --git a/packages/block-library/src/navigation/overlay.scss b/packages/block-library/src/navigation/overlay.scss
new file mode 100644
index 0000000000000..822cc8fdc80eb
--- /dev/null
+++ b/packages/block-library/src/navigation/overlay.scss
@@ -0,0 +1,223 @@
+// ********************************************************
+// VARIABLES & MIXINS
+// ********************************************************
+
+// Abstraction for Navigation breakpoint.
+@mixin nav-breakpoint() {
+	@include break-small {
+		@content;
+	}
+}
+
+
+// ********************************************************
+// ANIMATION
+// ********************************************************
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		transform: translateY(0.5em);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+
+// ********************************************************
+// ROOT
+// Alias: wp-block-navigation__responsive-container
+// ********************************************************
+.wp-overlay-component {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	@include nav-breakpoint {
+		&:not(.hidden-by-default):not(.is-overlay-open) {
+			display: block;
+			width: 100%;
+			position: relative;
+			z-index: auto;
+			background-color: inherit;
+		}
+	}
+
+	// STATE: overlay is open.
+	// ********************************************************
+	&.is-overlay-open {
+		display: flex; // Needs to be set to override "none".
+		flex-direction: column;
+		background-color: inherit;
+
+		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
+		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
+		// Allow modal to scroll.
+		overflow: auto;
+
+		// Give it a z-index just higher than the adminbar.
+		z-index: 100000;
+	}
+}
+
+
+// ********************************************************
+// DIALOG
+// Alias: wp-block-navigation__responsive-dialog
+// ********************************************************
+.wp-overlay-component__dialog {
+	position: relative;
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+		// Quesiton: why is this conditionally applied?
+		box-sizing: border-box;
+	}
+}
+
+
+// ********************************************************
+// CONTENT
+// Alias: wp-block-navigation__responsive-container-content
+// ********************************************************
+.wp-overlay-component__content {
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+
+		// Always align the contents of the menu to the top.
+		justify-content: flex-start;
+
+		// Add padding above to accommodate close button.
+		padding-top: calc(2rem + #{ $navigation-icon-size });
+
+		// Don't crop the focus style.
+		overflow: visible;
+
+		// Override the container flex layout settings
+		// because we want overlay menu to always display
+		// as a column.
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+
+		// Quesiton: why is this conditionally applied?
+		box-sizing: border-box;
+	}
+}
+
+
+// ********************************************************
+// TOGGLE BUTTONS
+// Alias:
+// - .wp-block-navigation__responsive-container-open,
+// - .wp-block-navigation__responsive-container-close
+// ********************************************************
+
+.wp-overlay-component__toggle {
+	vertical-align: middle;
+	cursor: pointer;
+	color: currentColor;
+	background: transparent;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-transform: inherit;
+
+	svg {
+		fill: currentColor;
+		pointer-events: none;
+		display: block;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
+	}
+}
+
+
+// ********************************************************
+// OPEN BUTTON
+// Alias: wp-block-navigation__responsive-container-open
+// ********************************************************
+
+.wp-overlay-component__open {
+	display: flex;
+
+	// Hide the button on smaller viewports except
+	// when the overlay is set to always show.
+
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
+	}
+}
+
+// ********************************************************
+// CLOSE BUTTON
+// Alias: wp-block-navigation__responsive-container-close
+// ********************************************************
+
+.wp-overlay-component__close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 2; // Needs to be above the modal z index itself.
+	display: none; // hide by default for all users.
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+		box-sizing: border-box;
+
+		// Reveal when overlay is open.
+		display: inline-flex; // as per <Button> component.
+	}
+
+	// STATE: overlay is set to always show.
+	// ********************************************************
+	&.always-shown {
+		display: inline-flex; // as per <Button> component.
+	}
+}
+
+
+// ********************************************************
+// MAYBE REDUNDANT
+// Alias: wp-block-navigation__responsive-close
+// ********************************************************
+.wp-overlay-component__maybe-redundant {
+	width: 100%;
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	// This element is not keyboard accessible, and is focusable only using the mouse.
+	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
+	// where clicking that scrim closes the overlay just like the close button.
+	// It should not have a visible focus rectangle.
+	&:focus {
+		outline: none;
+	}
+}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 0b70ebb656cfa..db2f6f03e62c1 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -457,23 +457,8 @@ button.wp-block-navigation-item__content {
  * Mobile menu.
  */
 
-@keyframes overlay-menu__fade-in-animation {
-	from {
-		opacity: 0;
-		transform: translateY(0.5em);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
 .wp-block-navigation__responsive-container {
-	display: none;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+
 
 	// Low specificity so that themes can override.
 	& :where(.wp-block-navigation-item a) {
@@ -494,147 +479,104 @@ button.wp-block-navigation-item__content {
 		color: inherit !important;
 		background-color: inherit !important;
 	}
+}
 
-	// Overlay menu.
-	// Provide an opinionated default style for menu items inside.
-	// Inherit as much as we can regarding colors, fonts, sizes,
-	// but otherwise provide a baseline.
-	// In a future version, we can explore more customizability.
-	&.is-menu-open {
-		display: flex; // Needs to be set to override "none".
-		flex-direction: column;
-		background-color: inherit;
-
-		// Animation.
-		animation: overlay-menu__fade-in-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-
-		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
-		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
-		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
-		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
-
-		// Allow modal to scroll.
-		overflow: auto;
-
-		// Give it a z-index just higher than the adminbar.
-		z-index: 100000;
+// Overlay menu.
+// Provide an opinionated default style for menu items inside.
+// Inherit as much as we can regarding colors, fonts, sizes,
+// but otherwise provide a baseline.
+// In a future version, we can explore more customizability.
+.wp-block-navigation__responsive-container.is-menu-open {
 
-		.wp-block-navigation__responsive-container-content {
-			// Add padding above to accommodate close button.
-			padding-top: calc(2rem + #{ $navigation-icon-size });
 
-			// Don't crop the focus style.
-			overflow: visible;
+	@include break-small() {
+		&.is-menu-open {
+			// Override breakpoint-inherited submenu rules.
+			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+				left: 0;
+			}
+		}
+	}
 
-			// Override the container flex layout settings
-			// because we want overlay menu to always display
-			// as a column.
-			display: flex;
-			flex-direction: column;
-			flex-wrap: nowrap;
+	.wp-block-navigation__responsive-container-content {
 
-			// Inherit alignment settings from container.
-			align-items: var(--navigation-layout-justification-setting, inherit);
 
-			// Always align the contents of the menu to the top.
-			&,
-			.wp-block-page-list,
-			.wp-block-navigation__container {
-				justify-content: flex-start;
-			}
+		// Inherit alignment settings from container.
+		align-items: var(--navigation-layout-justification-setting, inherit);
 
-			.wp-block-navigation__submenu-icon {
-				display: none;
-			}
+		// Always align the contents of the menu to the top.
+		.wp-block-page-list,
+		.wp-block-navigation__container {
+			justify-content: flex-start;
+		}
 
-			// Always expand/unfold submenus inside the modal.
-			.has-child .wp-block-navigation__submenu-container {
-				// Unset CSS that hides dropdown menus.
-				opacity: 1;
-				visibility: visible;
-				height: auto;
-				width: auto;
-				overflow: initial;
-				min-width: 200px;
-
-				// Position and style.
-				position: static;
-				border: none;
-				padding-left: 2rem;
-				padding-right: 2rem;
-			}
+		.wp-block-navigation__submenu-icon {
+			display: none;
+		}
 
-			// Space unfolded items using gap and padding for submenus.
-			.wp-block-navigation__submenu-container,
-			.wp-block-navigation__container {
-				gap: inherit;
-			}
+		// Always expand/unfold submenus inside the modal.
+		.has-child .wp-block-navigation__submenu-container {
+			// Unset CSS that hides dropdown menus.
+			opacity: 1;
+			visibility: visible;
+			height: auto;
+			width: auto;
+			overflow: initial;
+			min-width: 200px;
+
+			// Position and style.
+			position: static;
+			border: none;
+			padding-left: 2rem;
+			padding-right: 2rem;
+		}
 
-			// Apply top padding to nested submenus.
-			.wp-block-navigation__submenu-container {
-				padding-top: var(--wp--style--block-gap, 2em);
-			}
+		// Space unfolded items using gap and padding for submenus.
+		.wp-block-navigation__submenu-container,
+		.wp-block-navigation__container {
+			gap: inherit;
+		}
 
-			// A default padding is added to submenu items. It's not appropriate inside the modal.
-			.wp-block-navigation-item__content {
-				padding: 0;
-			}
+		// Apply top padding to nested submenus.
+		.wp-block-navigation__submenu-container {
+			padding-top: var(--wp--style--block-gap, 2em);
+		}
 
-			// Default column display for overlay menu contents.
-			.wp-block-navigation__container,
-			.wp-block-navigation-item,
-			.wp-block-page-list {
-				display: flex;
-				flex-direction: column;
-				// Inherit alignment settings from container.
-				align-items: var(--navigation-layout-justification-setting, initial);
-			}
+		// A default padding is added to submenu items. It's not appropriate inside the modal.
+		.wp-block-navigation-item__content {
+			padding: 0;
 		}
 
-		// Remove background colors for items inside the overlay menu.
-		// Has to be !important to override global styles.
-		.wp-block-navigation-item .wp-block-navigation__submenu-container,
+		// Default column display for overlay menu contents.
 		.wp-block-navigation__container,
 		.wp-block-navigation-item,
 		.wp-block-page-list {
-			color: inherit !important;
-			background: transparent !important;
-		}
-
-		// Override justification dropdown menu positioning rules.
-		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-			right: auto;
-			left: auto;
+			display: flex;
+			flex-direction: column;
+			// Inherit alignment settings from container.
+			align-items: var(--navigation-layout-justification-setting, initial);
 		}
 	}
 
-	@include break-small() {
-		&:not(.hidden-by-default) {
-			&:not(.is-menu-open) {
-				display: block;
-				width: 100%;
-				position: relative;
-				z-index: auto;
-				background-color: inherit;
-
-				.wp-block-navigation__responsive-container-close {
-					display: none;
-				}
-			}
-		}
+	// Remove background colors for items inside the overlay menu.
+	// Has to be !important to override global styles.
+	.wp-block-navigation-item .wp-block-navigation__submenu-container,
+	.wp-block-navigation__container,
+	.wp-block-navigation-item,
+	.wp-block-page-list {
+		color: inherit !important;
+		background: transparent !important;
+	}
 
-		&.is-menu-open {
-			// Override breakpoint-inherited submenu rules.
-			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-				left: 0;
-			}
-		}
+	// Override justification dropdown menu positioning rules.
+	.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+		right: auto;
+		left: auto;
 	}
+
 }
 
+
 // Default menu background and font color.
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
@@ -653,30 +595,10 @@ button.wp-block-navigation-item__content {
 	font-weight: bold;
 }
 
-// Menu and close buttons.
-.wp-block-navigation__responsive-container-open,
-.wp-block-navigation__responsive-container-close {
-	vertical-align: middle;
-	cursor: pointer;
-	color: currentColor;
-	background: transparent;
-	border: none;
-	margin: 0;
-	padding: 0;
-	text-transform: inherit;
-
-	svg {
-		fill: currentColor;
-		pointer-events: none;
-		display: block;
-		width: $navigation-icon-size;
-		height: $navigation-icon-size;
-	}
-}
 
 // Button to open the menu.
 .wp-block-navigation__responsive-container-open {
-	display: flex;
+
 
 	// When set to collapse into a text button, it should inherit the parent font.
 	// This needs specificity to override inherited properties by the button element and component.
@@ -686,20 +608,11 @@ button.wp-block-navigation-item__content {
 		font-size: inherit;
 	}
 
-	&:not(.always-shown) {
-		@include break-small {
-			display: none;
-		}
-	}
+
 }
 
 // Button to close the menus.
 .wp-block-navigation__responsive-container-close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	z-index: 2; // Needs to be above the modal z index itself.
-
 	// When set to collapse into a text button, it should inherit the parent font.
 	// This needs specificity to override inherited properties by the button element and component.
 	&.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
@@ -709,35 +622,6 @@ button.wp-block-navigation-item__content {
 	}
 }
 
-// The menu adds wrapping containers.
-.wp-block-navigation__responsive-close {
-	width: 100%;
-
-	.has-modal-open & {
-		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
-		max-width: var(--wp--style--global--wide-size, 100%);
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	// This element is not keyboard accessible, and is focusable only using the mouse.
-	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
-	// where clicking that scrim closes the overlay just like the close button.
-	// It should not have a visible focus rectangle.
-	&:focus {
-		outline: none;
-	}
-}
-
-.is-menu-open .wp-block-navigation__responsive-close,
-.is-menu-open .wp-block-navigation__responsive-dialog,
-.is-menu-open .wp-block-navigation__responsive-container-content {
-	box-sizing: border-box;
-}
-
-.wp-block-navigation__responsive-dialog {
-	position: relative;
-}
 
 // Adjust open dialog top margin when admin-bar is visible.
 // Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present.
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 790e09535f4b6..8c6f5fcddc811 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -24,6 +24,7 @@
 @import "./list/style.scss";
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
+@import "./navigation/overlay.scss";
 @import "./navigation-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";