diff --git a/frappe/desk/page/desktop/desktop.js b/frappe/desk/page/desktop/desktop.js
index 643c9081ae..bd3c6ca6a6 100644
--- a/frappe/desk/page/desktop/desktop.js
+++ b/frappe/desk/page/desktop/desktop.js
@@ -162,34 +162,36 @@ class DesktopPage {
 	}
 	setup_avatar() {
 		$(".desktop-avatar").html(frappe.avatar(frappe.session.user, "avatar-medium"));
-		$(".desktop-avatar").data("menu", "user-menu");
-		let menu_items = [
-			{
-				icon: "edit",
-				label: "Edit Profile",
-				url: `/update-profile/${frappe.session.user}`,
-			},
-			{
-				icon: "lock",
-				label: "Reset Password",
-				url: "/update-password",
-			},
-			{
-				icon: "rotate-ccw",
-				label: "Reset to Default",
-				onClick: function () {
-					reset_to_default();
-					window.location.reload();
+		let menu_items = {
+			name: "user-menu",
+			items: [
+				{
+					icon: "edit",
+					label: "Edit Profile",
+					url: `/update-profile/${frappe.session.user}`,
 				},
-			},
-			{
-				icon: "log-out",
-				label: "Logout",
-				onClick: function () {
-					frappe.app.logout();
+				{
+					icon: "lock",
+					label: "Reset Password",
+					url: "/update-password",
 				},
-			},
-		];
+				{
+					icon: "rotate-ccw",
+					label: "Reset to Default",
+					onClick: function () {
+						reset_to_default();
+						window.location.reload();
+					},
+				},
+				{
+					icon: "log-out",
+					label: "Logout",
+					onClick: function () {
+						frappe.app.logout();
+					},
+				},
+			],
+		};
 		frappe.ui.create_menu($(".desktop-avatar"), menu_items, null, true);
 	}
 	setup_navbar() {
diff --git a/frappe/public/js/frappe/ui/menu.js b/frappe/public/js/frappe/ui/menu.js
index 0c3bb1e951..fdb00298a8 100644
--- a/frappe/public/js/frappe/ui/menu.js
+++ b/frappe/public/js/frappe/ui/menu.js
@@ -2,9 +2,10 @@ import "../dom";
 frappe.provide("frappe.ui");
 
 frappe.ui.menu = class ContextMenu {
-	constructor(menu_items, left) {
-		this.template = $(`<div class="dropdown-menu context-menu" role="menu"></div>`);
-		this.menu_items = menu_items;
+	constructor(opts, left) {
+		this.template = $(`<div class="sidebar-header-menu context-menu" role="menu"></div>`);
+		this.menu_items = opts.items;
+		this.name = opts.name;
 		this.open_on_left = left;
 	}
 
@@ -23,7 +24,7 @@ frappe.ui.menu = class ContextMenu {
 		const me = this;
 		let item_wrapper = $(`<div class="dropdown-menu-item">
 			<a>
-				<div class="sidebar-item-icon">
+				<div class="menu-item-icon">
 					${
 						item.icon
 							? frappe.utils.icon(item.icon)
@@ -114,50 +115,42 @@ frappe.ui.menu = class ContextMenu {
 
 frappe.menu_map = {};
 
-frappe.ui.create_menu = function attachContextMenuToElement(
-	element,
-	menuItems,
-	right_click,
-	open_on_left
-) {
+frappe.ui.create_menu = function (element, opts, right_click, open_on_left) {
 	$(element).css("cursor", "pointer");
-	let contextMenu = new frappe.ui.menu(menuItems, open_on_left);
+	let context_menu = new frappe.ui.menu(opts, open_on_left);
 
-	frappe.menu_map[$(element).data("menu")] = contextMenu;
+	frappe.menu_map[context_menu.name] = context_menu;
 	if (right_click) {
 		$(element).on("contextmenu", function (event) {
 			event.preventDefault();
 			event.stopPropagation();
-			if (
-				frappe.menu_map[$(element).data("menu")] &&
-				frappe.menu_map[$(element).data("menu")].visible
-			) {
-				frappe.menu_map[$(element).data("menu")].hide();
+			if (frappe.menu_map[context_menu.name] && frappe.menu_map[context_menu.name].visible) {
+				frappe.menu_map[context_menu.name].hide();
 			} else {
-				frappe.menu_map[$(element).data("menu")].show(this);
+				frappe.menu_map[context_menu.name].show(this);
 			}
 		});
 	} else {
 		$(element).on("click", function (event) {
 			event.preventDefault();
 			event.stopPropagation();
-			if (frappe.menu_map[$(element).data("menu")].visible) {
-				frappe.menu_map[$(element).data("menu")].hide();
+			if (frappe.menu_map[context_menu.name].visible) {
+				frappe.menu_map[context_menu.name].hide();
 			} else {
-				frappe.menu_map[$(element).data("menu")].show(this);
+				frappe.menu_map[context_menu.name].show(this);
 			}
 		});
 	}
 
 	$(document).on("click", function () {
-		if (frappe.menu_map[$(element).data("menu")].visible) {
-			frappe.menu_map[$(element).data("menu")].hide();
+		if (frappe.menu_map[context_menu.name].visible) {
+			frappe.menu_map[context_menu.name].hide();
 		}
 	});
 
 	$(document).on("keydown", function (e) {
-		if (e.key === "Escape" && frappe.menu_map[$(element).data("menu")].visible) {
-			frappe.menu_map[$(element).data("menu")].hide();
+		if (e.key === "Escape" && frappe.menu_map[context_menu.name].visible) {
+			frappe.menu_map[context_menu.name].hide();
 		}
 	});
 };
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js
index 0a7411827a..2fb3be900a 100644
--- a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js
+++ b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js
@@ -77,39 +77,42 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem {
 	}
 	get_menu_items() {
 		let me = this;
-		let menu_items = [
-			{
-				label: "Edit Item",
-				icon: "pen",
-				onClick: () => {
-					frappe.app.sidebar.edit_item(me.item);
+		let menu_items = {
+			name: "edit-item",
+			items: [
+				{
+					label: "Edit Item",
+					icon: "pen",
+					onClick: () => {
+						frappe.app.sidebar.edit_item(me.item);
+					},
 				},
-			},
-			{
-				label: "Add Item Below",
-				icon: "add",
-				onClick: () => {
-					frappe.app.sidebar.add_below(me.item);
+				{
+					label: "Add Item Below",
+					icon: "add",
+					onClick: () => {
+						frappe.app.sidebar.add_below(me.item);
+					},
 				},
-			},
-			{
-				label: "Duplicate",
-				icon: "copy",
-				onClick: () => {
-					console.log("Start Deleting");
-					frappe.app.sidebar.duplicate_item(me.item);
+				{
+					label: "Duplicate",
+					icon: "copy",
+					onClick: () => {
+						console.log("Start Deleting");
+						frappe.app.sidebar.duplicate_item(me.item);
+					},
 				},
-			},
-			{
-				label: "Delete",
-				icon: "trash-2",
-				onClick: () => {
-					console.log(me.item);
-					frappe.app.sidebar.delete_item(me.item);
-					console.log("Start Deleting");
+				{
+					label: "Delete",
+					icon: "trash-2",
+					onClick: () => {
+						console.log(me.item);
+						frappe.app.sidebar.delete_item(me.item);
+						console.log("Start Deleting");
+					},
 				},
-			},
-		];
+			],
+		};
 		return menu_items;
 	}
 	add_menu_items() {}
@@ -258,43 +261,46 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
 
 	get_menu_items() {
 		let me = this;
-		let menu_items = [
-			{
-				label: "Edit Item",
-				icon: "pen",
-				onClick: () => {
-					console.log("Start ediitng");
-					frappe.app.sidebar.edit_item(me.item);
+		let menu_items = {
+			name: "edit-section-break",
+			items: [
+				{
+					label: "Edit Item",
+					icon: "pen",
+					onClick: () => {
+						console.log("Start ediitng");
+						frappe.app.sidebar.edit_item(me.item);
+					},
 				},
-			},
-			{
-				label: "Add Nested Items",
-				icon: "add",
-				onClick: () => {
-					frappe.app.sidebar.show_new_dialog({
-						nested: true,
-						parent_item: me.item,
-					});
+				{
+					label: "Add Nested Items",
+					icon: "add",
+					onClick: () => {
+						frappe.app.sidebar.show_new_dialog({
+							nested: true,
+							parent_item: me.item,
+						});
+					},
 				},
-			},
-			{
-				label: "Duplicate",
-				icon: "copy",
-				onClick: () => {
-					console.log("Start Deleting");
-					frappe.app.sidebar.duplicate_item(me.item);
+				{
+					label: "Duplicate",
+					icon: "copy",
+					onClick: () => {
+						console.log("Start Deleting");
+						frappe.app.sidebar.duplicate_item(me.item);
+					},
 				},
-			},
-			{
-				label: "Delete",
-				icon: "trash-2",
-				onClick: () => {
-					console.log(me.item);
-					frappe.app.sidebar.delete_item(me.item);
-					console.log("Start Deleting");
+				{
+					label: "Delete",
+					icon: "trash-2",
+					onClick: () => {
+						console.log(me.item);
+						frappe.app.sidebar.delete_item(me.item);
+						console.log("Start Deleting");
+					},
 				},
-			},
-		];
+			],
+		};
 		return menu_items;
 	}
 };
diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss
index cbbf49ddc6..c52b857dc3 100644
--- a/frappe/public/scss/desk/index.scss
+++ b/frappe/public/scss/desk/index.scss
@@ -52,4 +52,5 @@
 @import "../common/quill";
 @import "plyr";
 @import "version";
+@import "menu";
 @import "sidebar_header";
diff --git a/frappe/public/scss/desk/menu.scss b/frappe/public/scss/desk/menu.scss
new file mode 100644
index 0000000000..2bff90e83b
--- /dev/null
+++ b/frappe/public/scss/desk/menu.scss
@@ -0,0 +1,41 @@
+.sidebar-header-menu {
+	position: absolute;
+	top: 60px;
+	left: 9px;
+	width: 200px;
+	padding: 6px;
+	border-radius: var(--border-radius-lg);
+	background: var(--surface-modal);
+	box-shadow: var(--shadow-xl);
+}
+
+.dropdown-menu-item {
+	// padding: var(--padding-xs);
+	border-radius: var(--border-radius-sm);
+	&:hover {
+		background-color: var(--sidebar-hover-color);
+	}
+
+	a {
+		height: 28px;
+		padding: 6px 8px 6px 8px;
+		gap: 8px;
+		text-decoration: none;
+		display: flex;
+		align-items: center;
+		gap: var(--margin-sm);
+		.menu-item-icon {
+			line-height: 0px;
+			.app-logo {
+				width: 16px;
+				height: 16px;
+			}
+		}
+	}
+
+	.menu-item-title {
+		text-overflow: ellipsis;
+		text-wrap: nowrap;
+		overflow: hidden;
+	}
+}
diff --git a/frappe/public/scss/desk/sidebar_header.scss b/frappe/public/scss/desk/sidebar_header.scss
index 8c9449322e..010a7cc060 100644
--- a/frappe/public/scss/desk/sidebar_header.scss
+++ b/frappe/public/scss/desk/sidebar_header.scss
@@ -51,47 +51,3 @@
 	line-height: 1;
 	margin-top: 4px;
 }
-
-.sidebar-header-menu {
-	position: absolute;
-	top: 60px;
-	left: 9px;
-	width: 200px;
-	padding: 6px;
-	border-radius: var(--border-radius-lg);
-	background: var(--surface-modal);
-	box-shadow: var(--shadow-xl);
-	z-index: 1;
-}
-
-.dropdown-menu-item {
-	// padding: var(--padding-xs);
-	border-radius: var(--border-radius-sm);
-	opacity: 0px;
-	&:hover {
-		background-color: var(--sidebar-hover-color);
-	}
-
-	a {
-		height: 28px;
-		padding: 6px 8px 6px 8px;
-		gap: 8px;
-		text-decoration: none;
-		display: flex;
-		align-items: center;
-		gap: var(--margin-sm);
-		.sidebar-item-icon {
-			line-height: 0px;
-			.app-logo {
-				width: 16px;
-				height: 16px;
-			}
-		}
-	}
-
-	.menu-item-title {
-		text-overflow: ellipsis;
-		text-wrap: nowrap;
-		overflow: hidden;
-	}
-}