diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index b54da128bd86e..eb7f47c7c7b0e 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -71,6 +71,10 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"mobileBreakpoint": {
+			"type": "string",
+			"default": "782px"
 		}
 	},
 	"providesContext": {
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 918b609f92a0e..a315e23e96afe 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -29,6 +29,7 @@ import {
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalInputControl as InputControl,
 	Button,
 	Spinner,
 } from '@wordpress/components';
@@ -94,6 +95,7 @@ function Navigation( {
 		} = {},
 		hasIcon,
 		icon = 'handle',
+		mobileBreakpoint,
 	} = attributes;
 
 	const ref = attributes.ref;
@@ -561,6 +563,15 @@ function Navigation( {
 							label={ __( 'Always' ) }
 						/>
 					</ToggleGroupControl>
+
+					<InputControl
+						value={ mobileBreakpoint }
+						onChange={ ( nextValue ) =>
+							setAttributes( {
+								mobileBreakpoint: nextValue,
+							} )
+						}
+					/>
 					{ hasSubmenus && (
 						<>
 							<h3>{ __( 'Submenus' ) }</h3>
@@ -701,6 +712,7 @@ function Navigation( {
 					isHiddenByDefault={ 'always' === overlayMenu }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
+					mobileBreakpoint={ mobileBreakpoint }
 				>
 					<UnsavedInnerBlocks
 						blocks={ uncontrolledInnerBlocks }
@@ -937,6 +949,7 @@ function Navigation( {
 							isHiddenByDefault={ 'always' === overlayMenu }
 							overlayBackgroundColor={ overlayBackgroundColor }
 							overlayTextColor={ overlayTextColor }
+							mobileBreakpoint={ mobileBreakpoint }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index 47829b9a33a7d..97e6b8dc20abc 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -10,6 +10,7 @@ import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { getColorClassName } from '@wordpress/block-editor';
+import { useMediaQuery } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,7 +28,14 @@ export default function ResponsiveWrapper( {
 	overlayTextColor,
 	hasIcon,
 	icon,
+	mobileBreakpoint,
 } ) {
+	const isMobileBreakPoint = useMediaQuery(
+		`(max-width: ${ mobileBreakpoint })`
+	);
+
+	console.log( { mobileBreakpoint, isMobileBreakPoint } );
+
 	if ( ! isResponsive ) {
 		return children;
 	}
@@ -48,6 +56,7 @@ export default function ResponsiveWrapper( {
 			) ]: !! overlayBackgroundColor?.slug,
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
+			'is-mobile-breakpoint': isMobileBreakPoint,
 		}
 	);
 
@@ -61,7 +70,10 @@ export default function ResponsiveWrapper( {
 
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
-		{ 'always-shown': isHiddenByDefault }
+		{
+			'always-shown': isHiddenByDefault,
+			'is-mobile-breakpoint': isMobileBreakPoint,
+		}
 	);
 
 	const modalId = `${ id }-modal`;
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 1658c90fa38f1..15b74f82d1a29 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -433,7 +433,8 @@ $color-control-label-height: 20px;
 // These needs extra specificity in the editor.
 .wp-block-navigation__responsive-container:not(.is-menu-open) {
 	.components-button.wp-block-navigation__responsive-container-close {
-		@include break-small {
+		// @include break-small {
+		&.is-mobile-breakpoint {
 			display: none;
 		}
 	}
@@ -448,21 +449,26 @@ $color-control-label-height: 20px;
 		$admin-bar-height-big + $header-height + $block-toolbar-height +
 		$border-width;
 
-	@include break-medium() {
+	// @include break-medium() {
+	&.is-mobile-breakpoint {
 		top: $admin-bar-height + $header-height + $border-width;
 	}
 
+
 	// Navigation sidebar rules.
-	@include break-medium() {
+	// @include break-medium() {
+	&.is-mobile-breakpoint {
 		left: $admin-sidebar-width-collapsed;
 	}
+
 	@include break-large() {
 		left: $admin-sidebar-width;
 	}
 }
 
 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-	@include break-medium() {
+	// @include break-medium() {
+	&.is-mobile-breakpoint {
 		top:
 			$admin-bar-height + $header-height + $block-toolbar-height +
 			$border-width;
@@ -488,13 +494,15 @@ $color-control-label-height: 20px;
 			$admin-bar-height-big + $header-height + $block-toolbar-height +
 			$border-width;
 
-		@include break-medium() {
+		// @include break-medium() {
+		&.is-mobile-breakpoint {
 			top: $header-height + $border-width;
 		}
 	}
 
 	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-		@include break-medium() {
+		// @include break-medium() {
+		&.is-mobile-breakpoint {
 			top: $header-height + $block-toolbar-height + $border-width;
 		}
 	}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 0a00d7a779d31..a87cee951e6a3 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -10,6 +10,8 @@
 // Size of burger and close icons.
 $navigation-icon-size: 24px;
 
+
+
 .wp-block-navigation {
 	position: relative;
 
@@ -591,7 +593,8 @@ button.wp-block-navigation-item__content {
 		}
 	}
 
-	@include break-small() {
+	// @include break-small() {
+	&:not(.is-mobile-breakpoint) {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
 				display: block;
@@ -654,7 +657,8 @@ button.wp-block-navigation-item__content {
 	display: flex;
 
 	&:not(.always-shown) {
-		@include break-small {
+		// @include break-small {
+		&:not(.is-mobile-breakpoint) {
 			display: none;
 		}
 	}