diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
index 04ce87b4a0c8d..0412c2876e576 100644
--- a/packages/block-editor/src/components/list-view/drop-indicator.js
+++ b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 export default function ListViewDropIndicator( {
+	dropIndicatorClassName,
 	listViewRef,
 	blockDropTarget,
 } ) {
@@ -243,7 +249,10 @@ export default function ListViewDropIndicator( {
 			animate={ false }
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
-			className="block-editor-list-view-drop-indicator"
+			className={ classnames(
+				'block-editor-list-view-drop-indicator',
+				dropIndicatorClassName
+			) }
 			variant="unstyled"
 		>
 			<div
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 917ebd883aa8d..4aa2a62cbc7a1 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -60,12 +60,13 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Object}         props                        Components props.
  * @param {string}         props.id                     An HTML element id for the root element of ListView.
  * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {string}         props.dropIndicatorClassName Class name to be used for the drop indicator.
  * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
  * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
  * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
  * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
  * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.}
  * @param {string}         props.description            Optional accessible description for the tree grid component.
  * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.
  * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
@@ -75,6 +76,7 @@ function ListViewComponent(
 	{
 		id,
 		blocks,
+		dropIndicatorClassName,
 		dropZoneElement,
 		showBlockMovers = false,
 		isExpanded = false,
@@ -256,6 +258,7 @@ function ListViewComponent(
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
+				dropIndicatorClassName={ dropIndicatorClassName }
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 7afa7a1c98431..e74171f1c32c7 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -4,6 +4,10 @@
 	padding: 0;
 	margin: 0;
 
+	* {
+		box-sizing: border-box;
+	}
+
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
@@ -431,8 +435,10 @@ $block-navigation-max-indent: 8;
 	pointer-events: none;
 
 	.block-editor-list-view-drop-indicator__line {
+		box-sizing: border-box;
 		background: var(--wp-admin-theme-color);
-		height: 4px;
+		height: 6px;
+		border: 1px solid $white;
 		border-radius: 4px;
 	}
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
index 6cc3138c9c2f7..c72689894c477 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -98,6 +98,7 @@ export default function NavigationMenuContent( { rootClientId } ) {
 		<>
 			{ ! isLoading && (
 				<PrivateListView
+					dropIndicatorClassName="edit-site-sidebar-navigation-screen-navigation-menus__list-view-drop-indicator"
 					rootClientId={ listViewRootClientId }
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 525dd68d3b9f7..d6dc5c8867b3e 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -99,3 +99,10 @@
 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
 	display: none;
 }
+
+
+.edit-site-sidebar-navigation-screen-navigation-menus__list-view-drop-indicator {
+	.block-editor-list-view-drop-indicator__line {
+		border: 1px solid $gray-900 !important;
+	}
+}