From c7d84d6825805e0ed40cf115326f25b4348dcdfc Mon Sep 17 00:00:00 2001
From: Svetoslav Dekov <svetoslav.dekov@n8n.io>
Date: Thu, 5 Feb 2026 08:38:46 +0000
Subject: [PATCH] fix(editor): Fix resource creation menu spacing issue
 (no-changelog) (#25328)

---
 .../NavigationDropdown.vue                    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
index 7d346af159d..5449ffb8bb0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElMenu, ElSubMenu, ElMenuItem, type MenuItemRegistered } from 'element-plus';
-import { ref } from 'vue';
+import { ref, useSlots } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import type { IconSize } from '@n8n/design-system/types';
@@ -46,6 +46,9 @@ const emit = defineEmits<{
 	select: [id: Item['id']];
 }>();
 
+const slots = useSlots();
+const hasAppendSlot = (id: string) => Boolean(slots[`item.append.${id}`]);
+
 defineSlots<{
 	default?: () => unknown;
 	'item-icon'?: (props: { item: BaseItem }) => unknown;
@@ -169,7 +172,9 @@ defineExpose({
 									>
 										<N8nIcon icon="info" size="medium" :class="$style.infoIcon" />
 									</N8nTooltip>
-									<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
+									<span v-if="hasAppendSlot(item.id)" :class="$style.menuItemAppend">
+										<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
+									</span>
 								</ElMenuItem>
 							</ConditionalRouterLink>
 						</template>
@@ -182,7 +187,9 @@ defineExpose({
 						data-test-id="navigation-menu-item"
 					>
 						{{ item.title }}
-						<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
+						<span v-if="hasAppendSlot(item.id)" :class="$style.menuItemAppend">
+							<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
+						</span>
 					</ElMenuItem>
 				</ConditionalRouterLink>
 			</template>
@@ -280,6 +287,13 @@ defineExpose({
 	min-width: 0;
 }
 
+.menuItemAppend {
+	display: inline-flex;
+	align-items: center;
+	margin-left: auto;
+	padding-left: var(--spacing--2xs);
+}
+
 .infoTooltip {
 	flex-shrink: 0;
 	display: flex;