diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js
index de0cdd619f4559..60953410c032e0 100644
--- a/packages/block-editor/src/components/block-breadcrumb/index.js
+++ b/packages/block-editor/src/components/block-breadcrumb/index.js
@@ -65,27 +65,28 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					</Button>
 				) }
 				{ ! hasSelection && rootLabel }
+				{ !! clientId && (
+					<Icon
+						icon={ chevronRightSmall }
+						className="block-editor-block-breadcrumb__separator"
+					/>
+				) }
 			</li>
-			<Icon
-				icon={ chevronRightSmall }
-				className="block-editor-block-breadcrumb__separator"
-			/>
+
 			{ parents.map( ( parentClientId ) => (
-				<>
-					<li key={ parentClientId }>
-						<Button
-							className="block-editor-block-breadcrumb__button"
-							variant="tertiary"
-							onClick={ () => selectBlock( parentClientId ) }
-						>
-							<BlockTitle clientId={ parentClientId } />
-						</Button>
-					</li>
+				<li key={ parentClientId }>
+					<Button
+						className="block-editor-block-breadcrumb__button"
+						variant="tertiary"
+						onClick={ () => selectBlock( parentClientId ) }
+					>
+						<BlockTitle clientId={ parentClientId } />
+					</Button>
 					<Icon
 						icon={ chevronRightSmall }
 						className="block-editor-block-breadcrumb__separator"
 					/>
-				</>
+				</li>
 			) ) }
 			{ !! clientId && (
 				<li
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index 235d08e4f13794..32b1f2ff1a42b8 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -4,19 +4,19 @@
 	margin: 0;
 
 	li {
-		display: inline-block;
+		display: inline-flex;
 		margin: 0;
-	}
 
-	.block-editor-block-breadcrumb__separator {
-		fill: currentColor;
-		margin-left: -$grid-unit-05;
-		margin-right: -$grid-unit-05;
+		.block-editor-block-breadcrumb__separator {
+			fill: currentColor;
+			margin-left: -$grid-unit-05;
+			margin-right: -$grid-unit-05;
 
-		// Flip for RTL.
-		transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the chevron right for LTR and left for RTL.
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the chevron right for LTR and left for RTL.
+		}
 
-		&:last-child {
+		&:last-child .block-editor-block-breadcrumb__separator {
 			display: none;
 		}
 	}
diff --git a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
index 1d32d3c66996c8..85dd26bc0a7f3b 100644
--- a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
@@ -12,19 +12,5 @@ exports[`BlockBreadcrumb should render correctly 1`] = `
   >
     Document
   </li>
-  <svg
-    aria-hidden="true"
-    class="block-editor-block-breadcrumb__separator"
-    focusable="false"
-    height="24"
-    role="img"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z"
-    />
-  </svg>
 </ul>
 `;