diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 7a1e099b1ec736..591e5a8da53919 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -1,287 +1,11 @@
 // Navigation item styles.
-// This also styles navigation links inside the Page List block,
-// as that block is meant to behave as menu items when leveraged.
+// Contains styles only that are unique to the manually inserted menu item.
+// Styles in the Navigation block itself target both custom menu items, and
+// those from the Page List block.
 .wp-block-navigation {
-	// Menu item container.
-	.wp-block-pages-list__item,
-	.wp-block-navigation-link {
-		display: flex;
-		align-items: center;
-		position: relative;
-
-		.wp-block-navigation-link__container:empty {
-			display: none;
-		}
-	}
-
-	// Menu item link.
-	.wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content {
-		// Inherit colors set by the block color definition.
-		color: inherit;
-		display: block;
-	}
-
-	// Force links to inherit text decoration applied to navigation block.
-	// The extra selector adds specificity to ensure it works when user-set.
-	&[style*="text-decoration"] {
-		.wp-block-pages-list__item,
-		.wp-block-navigation-link__container,
-		.wp-block-navigation-link {
-			text-decoration: inherit;
-		}
-
-		.wp-block-pages-list__item__link,
-		.wp-block-navigation-link__content {
-			text-decoration: inherit;
-
-			&:focus,
-			&:active {
-				text-decoration: inherit;
-			}
-		}
-	}
-
-	&:not([style*="text-decoration"]) {
-		.wp-block-pages-list__item__link,
-		.wp-block-navigation-link__content {
-			text-decoration: none;
-
-			&:focus,
-			&:active {
-				text-decoration: none;
-			}
-		}
-	}
-
 	// This wraps just the innermost text for custom menu items.
 	.wp-block-navigation-link__label {
 		word-break: normal;
 		overflow-wrap: break-word;
 	}
-
-	// Submenu indicator.
-	.wp-block-page-list__submenu-icon,
-	.wp-block-navigation-link__submenu-icon {
-		height: inherit;
-
-		svg {
-			stroke: currentColor;
-		}
-	}
-
-	// Some themes have added custom padding to the link, which does not consider the Page List block.
-	// Unfortunately we now need to add extra specificity and undo that, so that the block still works.
-	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
-		padding: 0;
-	}
-
-	// Styles for submenu flyout.
-	.has-child {
-		// This adds a little space between the link and the dropdown icon.
-		> .wp-block-pages-list__item__link,
-		> .wp-block-navigation-link__content {
-			margin-right: 0.5em;
-		}
-
-		.submenu-container,
-		.wp-block-navigation-link__container {
-			background-color: inherit;
-			color: inherit;
-			position: absolute;
-			z-index: 2;
-			display: flex;
-			flex-direction: column;
-			align-items: normal;
-			min-width: 200px;
-
-			// Hide until hover or focus within.
-			opacity: 0;
-			transition: opacity 0.1s linear;
-			visibility: hidden;
-
-			> .wp-block-pages-list__item,
-			> .wp-block-navigation-link {
-				> .wp-block-pages-list__item__link,
-				> .wp-block-navigation-link__content {
-					flex-grow: 1;
-				}
-
-				> .wp-block-page-list__submenu-icon,
-				> .wp-block-navigation-link__submenu-icon {
-					padding-right: 0.5em;
-				}
-			}
-
-			// Nested submenus sit to the left on large breakpoints.
-			// On smaller breakpoints, they open vertically, accordion-style.
-			@include break-medium {
-				.submenu-container,
-				.wp-block-navigation-link__container {
-					// Prevent the menu from disappearing when the mouse is over the gap
-					&::before {
-						content: "";
-						position: absolute;
-						right: 100%;
-						height: 100%;
-						display: block;
-						width: 0.5em;
-						background: transparent;
-					}
-				}
-
-				// Reset the submenu indicator for horizontal flyouts.
-				.wp-block-page-list__submenu-icon svg,
-				.wp-block-navigation-link__submenu-icon svg {
-					transform: rotate(-90deg);
-				}
-			}
-		}
-
-		// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
-		// We will need to replace focus-within with a JS solution for IE keyboard support.
-
-		// Custom menu items.
-		// Show submenus on hover.
-		&:hover > .wp-block-navigation-link__container {
-			visibility: visible;
-			opacity: 1;
-		}
-
-		// Keep submenus open when focus is within.
-		&:focus-within > .wp-block-navigation-link__container {
-			visibility: visible;
-			opacity: 1;
-		}
-
-		// Page list menu items.
-		&:hover {
-			cursor: pointer;
-
-			> .submenu-container {
-				visibility: visible;
-				opacity: 1;
-			}
-		}
-
-		&:focus-within {
-			cursor: pointer;
-
-			> .submenu-container {
-				visibility: visible;
-				opacity: 1;
-			}
-		}
-	}
-
-
-	// When justified space-between, open submenus leftward for last menu item.
-	// When justified right, open all submenus leftwards.
-	&.items-justified-space-between > .submenu-container > .has-child:last-child,
-	&.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
-	&.items-justified-right .has-child {
-		// First submenu.
-		.submenu-container,
-		.wp-block-navigation-link__container {
-			left: auto;
-			right: 0;
-
-			// Nested submenus.
-			.submenu-container,
-			.wp-block-navigation-link__container {
-				left: auto;
-				right: 100%;
-			}
-		}
-	}
-}
-
-// Margins, paddings, and submenu positions.
-// These need extra specificity to override potentially inherited properties.
-.wp-block-navigation.wp-block-navigation {
-
-	// Menu items with no background.
-	.wp-block-page-list,
-	.wp-block-page-list > .wp-block-pages-list__item,
-	.wp-block-navigation__container > .wp-block-navigation-link {
-		margin: 0 2em 0 0;
-
-		// Margin of right-most margin should be zero, for right aligned or justified items.
-		&:last-child {
-			margin-right: 0;
-		}
-	}
-
-	// When the menu has a background, items have paddings, reduce margins to compensate.
-	// Treat margins and paddings differently when the block has a background.
-	&.has-background {
-		.wp-block-page-list,
-		.wp-block-page-list > .wp-block-pages-list__item,
-		.wp-block-navigation__container > .wp-block-navigation-link {
-			margin: 0 0.5em 0 0;
-		}
-
-		.wp-block-page-list .wp-block-pages-list__item__link,
-		.wp-block-navigation__container .wp-block-navigation-link__content {
-			padding: 0.5em 1em;
-		}
-	}
-
-	// Spacing in all submenus.
-	.has-child .submenu-container,
-	.has-child .wp-block-navigation-link__container {
-		.wp-block-pages-list__item,
-		.wp-block-navigation-link {
-			margin: 0;
-		}
-
-		.wp-block-pages-list__item__link,
-		.wp-block-navigation-link__content {
-			padding: 0.5em 1em;
-		}
-
-		// Submenu indentation when there's no background.
-		left: -1em;
-		top: 100%;
-
-		// Indentation for all submenus.
-		@include break-medium {
-			.submenu-container,
-			.wp-block-navigation-link__container {
-				left: 100%;
-				top: -1px; // Border width.
-			}
-		}
-	}
-
-	// Submenu indentation when there's a background.
-	&.has-background .has-child .submenu-container,
-	&.has-background .has-child .wp-block-navigation-link__container {
-		left: 0;
-		top: 100%;
-
-		// There's no border on submenus when there are backgrounds.
-		@include break-medium {
-			.submenu-container,
-			.wp-block-navigation-link__container {
-				left: 100%;
-				top: 0;
-			}
-		}
-	}
-}
-
-// Default background and font color.
-.wp-block-navigation:not(.has-background) {
-	.submenu-container, // This target items created by the Page List block.
-	.wp-block-navigation__container .wp-block-navigation-link__container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: #fff;
-		color: #000;
-		border: 1px solid rgba(0, 0, 0, 0.15);
-	}
 }
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 6c0216c17f1789..141907bd08becf 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -1,3 +1,8 @@
+// Navigation block and menu item styles.
+// This also styles navigation links inside the Page List block,
+// as that block is meant to behave as menu items when leveraged.
+// The CSS lives here so that it is output even if you only use a
+// Page List block inside your navigation block.
 .wp-block-navigation {
 	// Normalize list styles.
 	ul,
@@ -7,6 +12,283 @@
 		// Overrides generic ".entry-content li" styles on the front end.
 		padding: 0;
 	}
+
+	// Menu item container.
+	.wp-block-pages-list__item,
+	.wp-block-navigation-link {
+		display: flex;
+		align-items: center;
+		position: relative;
+
+		.wp-block-navigation-link__container:empty {
+			display: none;
+		}
+	}
+
+	// Menu item link.
+	.wp-block-pages-list__item__link,
+	.wp-block-navigation-link__content {
+		// Inherit colors set by the block color definition.
+		color: inherit;
+		display: block;
+	}
+
+	// Force links to inherit text decoration applied to navigation block.
+	// The extra selector adds specificity to ensure it works when user-set.
+	&[style*="text-decoration"] {
+		.wp-block-pages-list__item,
+		.wp-block-navigation-link__container,
+		.wp-block-navigation-link {
+			text-decoration: inherit;
+		}
+
+		.wp-block-pages-list__item__link,
+		.wp-block-navigation-link__content {
+			text-decoration: inherit;
+
+			&:focus,
+			&:active {
+				text-decoration: inherit;
+			}
+		}
+	}
+
+	&:not([style*="text-decoration"]) {
+		.wp-block-pages-list__item__link,
+		.wp-block-navigation-link__content {
+			text-decoration: none;
+
+			&:focus,
+			&:active {
+				text-decoration: none;
+			}
+		}
+	}
+
+	// Submenu indicator.
+	.wp-block-page-list__submenu-icon,
+	.wp-block-navigation-link__submenu-icon {
+		height: inherit;
+
+		svg {
+			stroke: currentColor;
+		}
+	}
+
+	// Some themes have added custom padding to the link, which does not consider the Page List block.
+	// Unfortunately we now need to add extra specificity and undo that, so that the block still works.
+	.wp-block-pages-list__item .wp-block-pages-list__item__link,
+	.wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
+		padding: 0;
+	}
+
+	// Styles for submenu flyout.
+	.has-child {
+		// This adds a little space between the link and the dropdown icon.
+		> .wp-block-pages-list__item__link,
+		> .wp-block-navigation-link__content {
+			margin-right: 0.5em;
+		}
+
+		.submenu-container,
+		.wp-block-navigation-link__container {
+			background-color: inherit;
+			color: inherit;
+			position: absolute;
+			z-index: 2;
+			display: flex;
+			flex-direction: column;
+			align-items: normal;
+			min-width: 200px;
+
+			// Hide until hover or focus within.
+			opacity: 0;
+			transition: opacity 0.1s linear;
+			visibility: hidden;
+
+			> .wp-block-pages-list__item,
+			> .wp-block-navigation-link {
+				> .wp-block-pages-list__item__link,
+				> .wp-block-navigation-link__content {
+					flex-grow: 1;
+				}
+
+				> .wp-block-page-list__submenu-icon,
+				> .wp-block-navigation-link__submenu-icon {
+					padding-right: 0.5em;
+				}
+			}
+
+			// Nested submenus sit to the left on large breakpoints.
+			// On smaller breakpoints, they open vertically, accordion-style.
+			@include break-medium {
+				.submenu-container,
+				.wp-block-navigation-link__container {
+					// Prevent the menu from disappearing when the mouse is over the gap
+					&::before {
+						content: "";
+						position: absolute;
+						right: 100%;
+						height: 100%;
+						display: block;
+						width: 0.5em;
+						background: transparent;
+					}
+				}
+
+				// Reset the submenu indicator for horizontal flyouts.
+				.wp-block-page-list__submenu-icon svg,
+				.wp-block-navigation-link__submenu-icon svg {
+					transform: rotate(-90deg);
+				}
+			}
+		}
+
+		// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
+		// We will need to replace focus-within with a JS solution for IE keyboard support.
+
+		// Custom menu items.
+		// Show submenus on hover.
+		&:hover > .wp-block-navigation-link__container {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		// Keep submenus open when focus is within.
+		&:focus-within > .wp-block-navigation-link__container {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		// Page list menu items.
+		&:hover {
+			cursor: pointer;
+
+			> .submenu-container {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+
+		&:focus-within {
+			cursor: pointer;
+
+			> .submenu-container {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+	}
+
+
+	// When justified space-between, open submenus leftward for last menu item.
+	// When justified right, open all submenus leftwards.
+	&.items-justified-space-between > .submenu-container > .has-child:last-child,
+	&.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+	&.items-justified-right .has-child {
+		// First submenu.
+		.submenu-container,
+		.wp-block-navigation-link__container {
+			left: auto;
+			right: 0;
+
+			// Nested submenus.
+			.submenu-container,
+			.wp-block-navigation-link__container {
+				left: auto;
+				right: 100%;
+			}
+		}
+	}
+}
+
+// Margins, paddings, and submenu positions.
+// These need extra specificity to override potentially inherited properties.
+.wp-block-navigation.wp-block-navigation {
+
+	// Menu items with no background.
+	.wp-block-page-list,
+	.wp-block-page-list > .wp-block-pages-list__item,
+	.wp-block-navigation__container > .wp-block-navigation-link {
+		margin: 0 2em 0 0;
+
+		// Margin of right-most margin should be zero, for right aligned or justified items.
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	// When the menu has a background, items have paddings, reduce margins to compensate.
+	// Treat margins and paddings differently when the block has a background.
+	&.has-background {
+		.wp-block-page-list,
+		.wp-block-page-list > .wp-block-pages-list__item,
+		.wp-block-navigation__container > .wp-block-navigation-link {
+			margin: 0 0.5em 0 0;
+		}
+
+		.wp-block-page-list .wp-block-pages-list__item__link,
+		.wp-block-navigation__container .wp-block-navigation-link__content {
+			padding: 0.5em 1em;
+		}
+	}
+
+	// Spacing in all submenus.
+	.has-child .submenu-container,
+	.has-child .wp-block-navigation-link__container {
+		.wp-block-pages-list__item,
+		.wp-block-navigation-link {
+			margin: 0;
+		}
+
+		.wp-block-pages-list__item__link,
+		.wp-block-navigation-link__content {
+			padding: 0.5em 1em;
+		}
+
+		// Submenu indentation when there's no background.
+		left: -1em;
+		top: 100%;
+
+		// Indentation for all submenus.
+		@include break-medium {
+			.submenu-container,
+			.wp-block-navigation-link__container {
+				left: 100%;
+				top: -1px; // Border width.
+			}
+		}
+	}
+
+	// Submenu indentation when there's a background.
+	&.has-background .has-child .submenu-container,
+	&.has-background .has-child .wp-block-navigation-link__container {
+		left: 0;
+		top: 100%;
+
+		// There's no border on submenus when there are backgrounds.
+		@include break-medium {
+			.submenu-container,
+			.wp-block-navigation-link__container {
+				left: 100%;
+				top: 0;
+			}
+		}
+	}
+}
+
+// Default background and font color.
+.wp-block-navigation:not(.has-background) {
+	.submenu-container, // This target items created by the Page List block.
+	.wp-block-navigation__container .wp-block-navigation-link__container {
+		// Set a background color for submenus so that they're not transparent.
+		// NOTE TO DEVS - if refactoring this code, please double-check that
+		// submenus have a default background color, this feature has regressed
+		// several times, so care needs to be taken.
+		background-color: #fff;
+		color: #000;
+		border: 1px solid rgba(0, 0, 0, 0.15);
+	}
 }
 
 // Navigation block inner container.