diff --git a/packages/editor/src/hooks/template-part-navigation-edit-button.js b/packages/editor/src/hooks/template-part-navigation-edit-button/index.js
similarity index 88%
rename from packages/editor/src/hooks/template-part-navigation-edit-button.js
rename to packages/editor/src/hooks/template-part-navigation-edit-button/index.js
index 99a406140676a6..3508e059b289cc 100644
--- a/packages/editor/src/hooks/template-part-navigation-edit-button.js
+++ b/packages/editor/src/hooks/template-part-navigation-edit-button/index.js
@@ -9,11 +9,7 @@ import {
 	BlockControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	__experimentalDivider as Divider,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -97,14 +93,7 @@ function TemplatePartNavigationEditButton( { clientId } ) {
 
 	return (
 		<BlockControls group="other">
-			<ToolbarGroup>
-				{ /*
-				 * Add a vertical divider to visually separate the "Edit navigation"
-				 * button from the template part's "Edit" button. Both buttons share
-				 * the same toolbar group ("other"), so without this divider they
-				 * would appear directly adjacent with no visual separation.
-				 */ }
-				<Divider orientation="vertical" marginEnd={ 3 } />
+			<ToolbarGroup className="wp-block-template-part__navigation-edit-button">
 				<ToolbarButton
 					label={ __( 'Edit navigation' ) }
 					onClick={ onEditNavigation }
diff --git a/packages/editor/src/hooks/template-part-navigation-edit-button/style.scss b/packages/editor/src/hooks/template-part-navigation-edit-button/style.scss
new file mode 100644
index 00000000000000..be6132511d25ce
--- /dev/null
+++ b/packages/editor/src/hooks/template-part-navigation-edit-button/style.scss
@@ -0,0 +1,32 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.wp-block-template-part__navigation-edit-button.components-toolbar-group {
+	// Add a vertical divider before the button to visually separate it
+	// from the template part's "Edit" button.
+	&::before {
+		display: inline;
+		width: 0;
+		height: auto;
+		border-right: 1px solid currentColor;
+		margin-right: $grid-unit-15;
+		content: "";
+	}
+
+	// In top toolbar mode, match the divider styling used in the collapsible block toolbar.
+	.editor-collapsible-block-toolbar & {
+		position: relative;
+		margin-left: 0.75 * $grid-unit;
+		padding-right: 0;
+
+		&::before {
+			height: $grid-unit-30;
+			border-right: $border-width solid $gray-300;
+			top: $grid-unit-05;
+			position: absolute;
+			left: -$border-width;
+			right: auto;
+		}
+	}
+}
+
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 09e18b0dbbdd86..4c7203843e0ddd 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -61,3 +61,4 @@
 @use "./components/visual-editor/style.scss" as *;
 @use "./dataviews/fields/content-preview/style.scss" as *;
 @use "./hooks/push-changes-to-global-styles/style.scss" as *;
+@use "./hooks/template-part-navigation-edit-button/style.scss" as *;