Example Docs: Add menu item examples (#20910)

Add menu item registration examples

Introduces example implementations for registering action, link, and entity menu items in the backoffice. Includes manifests and API to demonstrate how to extend the menu system.

src/Umbraco.Web.UI.Client/examples/menu-item/README.md

@@ -0,0 +1,9 @@
+# Menu Item Example
+
+This example demonstrates how to register a Menu Item.
+
+The example includes:
+
+- Action Menu Item Registration
+- Link Menu Item Registration
+- Entity Menu Item Registration

src/Umbraco.Web.UI.Client/examples/menu-item/action/action-menu-item.api.ts

@@ -0,0 +1,17 @@
+import { UmbMenuItemActionApiBase } from '@umbraco-cms/backoffice/menu';
+
+/**
+ * Example menu item action API
+ * This action will log "Hello world" to the console when executed.
+ */
+export class ExampleActionMenuItemApi extends UmbMenuItemActionApiBase<never> {
+	/**
+	 * This method is executed when the menu item is clicked
+	 */
+	override async execute() {
+		console.log('Hello world');
+	}
+}
+
+// Declare an `api` export so the Extension Registry can initialize this class
+export { ExampleActionMenuItemApi as api };

src/Umbraco.Web.UI.Client/examples/menu-item/action/manifests.ts

@@ -0,0 +1,16 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		kind: 'action',
+		alias: 'Example.MenuItem.Action',
+		name: 'Example Action Menu Item',
+		api: () => import('./action-menu-item.api.js'),
+		meta: {
+			label: 'Example Action Menu Item',
+			icon: 'icon-hammer',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/menu-item/entity/manifests.ts

@@ -0,0 +1,15 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		alias: 'Example.MenuItem.Entity',
+		name: 'Example Entity Menu Item',
+		meta: {
+			label: 'Example Entity Menu Item',
+			icon: 'icon-wand',
+			entityType: 'example-entity-type',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/menu-item/index.ts

@@ -0,0 +1,5 @@
+import { manifests as actionManifests } from './action/manifests.js';
+import { manifests as entityManifests } from './entity/manifests.js';
+import { manifests as linkManifests } from './link/manifests.js';
+
+export const manifests = [...actionManifests, ...entityManifests, ...linkManifests];

src/Umbraco.Web.UI.Client/examples/menu-item/link/manifests.ts

@@ -0,0 +1,16 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		kind: 'link',
+		alias: 'Example.MenuItem.ExternalLink',
+		name: 'Example External Link Menu Item',
+		meta: {
+			label: 'Example Link Menu Item',
+			icon: 'icon-link',
+			href: 'https://',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/menu-item/tree/README.md

@@ -0,0 +1,3 @@
+#Tree Menu Item
+
+See the Tree Example of how to register a tree and use it as a menu item in the sidebar.