diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index e11e9c949381c3..8f3c08717e5dd4 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 47fa26ce4920cc..e85c873c700e1b 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 fff5f80b39f069..a8c1ae6bdd451f 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 1128874463d574..610b74d77ff1c9 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 74077954e1dc35..5c5d813b02d38b 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;