diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index e11e9c949381c..8f3c08717e5dd 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -41,7 +41,7 @@
  * Navigation Items.
  */
 
-.wp-block-navigation-link {
+.wp-block-navigation-item {
 	.wp-block-navigation__submenu-container {
 		display: block;
 	}
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 47fa26ce4920c..e85c873c700e1 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -31,7 +31,7 @@
 
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
-.wp-block-navigation-link {
+.wp-block-navigation-item {
 	background-color: inherit;
 }
 
@@ -215,7 +215,7 @@ $color-control-label-height: 20px;
 
 	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
-	.wp-block-navigation-link.wp-block-navigation-link {
+	.wp-block-navigation-item.wp-block-navigation-item {
 		position: relative;
 		min-width: 72px;
 
@@ -237,7 +237,7 @@ $color-control-label-height: 20px;
 	}
 
 
-	.wp-block-navigation-link.wp-block-navigation-link,
+	.wp-block-navigation-item.wp-block-navigation-item,
 	.wp-block-navigation-placeholder__preview-search-icon {
 		opacity: 0.3;
 	}
@@ -250,6 +250,7 @@ $color-control-label-height: 20px;
 		width: 0;
 		overflow: hidden;
 		flex-wrap: nowrap;
+		flex: 0;
 	}
 
 	// Hide entirely when vertical.
diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js
index fff5f80b39f06..a8c1ae6bdd451 100644
--- a/packages/block-library/src/navigation/placeholder-preview.js
+++ b/packages/block-library/src/navigation/placeholder-preview.js
@@ -6,9 +6,9 @@ import { Icon, search } from '@wordpress/icons';
 const PlaceholderPreview = () => {
 	return (
 		<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
 			<li className="wp-block-navigation-placeholder__preview-search-icon">
 				<Icon icon={ search } />
 			</li>
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
index 1128874463d57..610b74d77ff1c 100644
--- a/packages/components/src/navigation/README.md
+++ b/packages/components/src/navigation/README.md
@@ -44,6 +44,15 @@ const MyNavigation = () => (
 	</Navigation>
 );
 ```
+## CSS Classes leveraged
+
+The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
+
+- `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
+- `.wp-block-navigation-item` is applied to every menu item.
+- `.wp-block-navigation-item__content` is applied to the link inside a menu item.
+- `.wp-block-navigation-link__label` is applied to the innermost container around the menu item text label.
+- `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
 
 ## Navigation Props
 
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 74077954e1dc3..5c5d813b02d38 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -30,7 +30,7 @@
 		font-family: $default-font;
 
 		// Increase specificity.
-		.wp-block-navigation-link {
+		.wp-block-navigation-item {
 			display: block;
 
 			// Show submenus on click.
@@ -55,7 +55,7 @@
 
 			// Menu items.
 			// This needs high specificity to override inherited values.
-			&.wp-block-navigation-link.wp-block-navigation-link {
+			&.wp-block-navigation-item.wp-block-navigation-item {
 				margin-right: 0;
 			}
 
@@ -124,7 +124,7 @@
 		}
 
 		// Override inherited values to optimize menu items for the screen context.
-		.wp-block-navigation-link.has-child {
+		.wp-block-navigation-item.has-child {
 			cursor: default;
 			border-radius: $radius-block-ui;
 		}
@@ -137,7 +137,7 @@
 
 		// When editing a link with children, highlight the parent
 		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-link.has-child.is-editing {
+		.wp-block-navigation-item.has-child.is-editing {
 			> .wp-block-navigation__container,
 			> .wp-block-navigation__submenu-container {
 				opacity: 1;