Revamp "Menus" documentation: updated examples to align with new JSON schema and TypeScript imports. Removed outdated code and restructured sections for clarity and consistency.

Author: bszyman

16/umbraco-cms/customizing/extending-overview/extension-types/menu.md

@@ -18,9 +18,16 @@ Menu extensions can be created using either JSON or TypeScript. Both approaches
 {% code title="umbraco-package.json" %}
 ```json
 {
- "type": "menu",
- "alias": "My.Menu",
- "name": "My Menu"
+    "$schema": "../../umbraco-package-schema.json",
+    "name": "My Package",
+    "version": "0.1.0",
+    "extensions": [
+        {
+            "type": "menu",
+            "alias": "My.Menu",
+            "name": "My Menu"
+        }
+    ]
 }
 ```
 {% endcode %}
@@ -32,13 +39,11 @@ Extension authors define the menu manifest, then register it dynamically/during
 ```typescript
 import type { ManifestMenu } from '@umbraco-cms/backoffice/menu';
 
-export const menuManifest: Array<ManifestMenu> = [
-    {
-        type: 'menu',
-        alias: 'My.Menu',
-        name: 'My Menu'
-    }
-];
+export const menuManifest: ManifestMenu = {
+    type: 'menu',
+    alias: 'My.Menu',
+    name: 'My Menu'
+};
 ```
 {% endcode %}
 
@@ -79,14 +84,21 @@ To add custom menu items, you can define a single MenuItem manifest and link an
 {% code title="umbraco-package.json" %}
 ```json
 {
- "type": "menuItem",
- "alias": "My.MenuItem",
- "name": "My Menu Item",
- "element": "./menu-items.ts",
- "meta": {
-  "label": "My Menu Item",
-  "menus": ["My.Menu"]
- }
+    "$schema": "../../umbraco-package-schema.json",
+    "name": "My Package",
+    "version": "0.1.0",
+    "extensions": [
+        {
+            "type": "menuItem",
+            "alias": "My.MenuItem",
+            "name": "My Menu Item",
+            "element": "./menu-items.ts",
+            "meta": {
+                "label": "My Menu Item",
+                "menus": ["My.Menu"]
+            }
+        }
+    ]
 }
 ```
 {% hint style="info" %}
@@ -102,17 +114,17 @@ The `element` attribute will point toward a custom Lit component, an example of
 
 {% code title="my-menu/manifests.ts" %}
 ```typescript
-const menuItemManifest: Array<ManifestMenuItem> = [
-    {
-        type: 'menuItem',
-        alias: 'My.MenuItem',
-        name: 'My Menu Item',
-        meta: {
-            label: 'My Menu Item',
-            menus: ["My.Menu"]
-        },
-    }
-];
+import type { ManifestMenuItem } from '@umbraco-cms/backoffice/menu';
+
+export const menuItemManifest: ManifestMenuItem = {
+    type: 'menuItem',
+    alias: 'My.MenuItem',
+    name: 'My Menu Item',
+    meta: {
+        label: 'My Menu Item',
+        menus: ["My.Menu"]
+    },
+};
 ```
 {% endcode %}
 
@@ -134,123 +146,6 @@ export const onInit: UmbEntryPointOnInit = (_host, _extensionRegistry) => {
 {% endtab %}
 {% endtabs %}
 
-### Custom menu items
-
-{% hint style="info" %}
-**Note:** Displaying menu item extensions does not require extension authors to create custom menu item subclasss. This step is optional.
-{% endhint %}
-
-To render your menu items in Umbraco, extension authors can use the [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component enables nested menu structures with a few lines of markup.
-
-`<uui-menu-item>` nodes accept the `has-children` boolean attribute, which will display a caret icon indicating nested items. Tying this boolean attribute to a variable requires using the `?` Lit directive, which would look similar to this: `?has-children=${boolVariable}`.
-
-**Example:**
-
-```html
-<uui-menu-item label="Menu Item 1" has-children>
-    <uui-menu-item label="Nested Menu Item 1"></uui-menu-item>
-    <uui-menu-item label="Nested Menu Item 2"></uui-menu-item>
-</uui-menu-item>
-```
-
-### Custom menu item element example
-
-Custom elements can fetch the data and render menu items using markup, like above. Storing the results of the fetch in a `@state()` variable will trigger a re-render of the component when the value of the variable changes.
-
-{% code title="menu-items.ts" overflow="wrap" lineNumbers="true" %}
-```typescript
-import type { UmbMenuItemElement } from '@umbraco-cms/backoffice/menu';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, TemplateResult, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { MyMenuItemResponseModel, MyMenuResource } from '../../../api';
-
-const elementName = 'my-menu-item';
-
-@customElement(elementName)
-class MyMenuItems extends UmbLitElement implements UmbMenuItemElement {
-    @state()
-    private _items: MyMenuItemResponseModel[] = []; // Store fetched items
-
-    @state()
-    private _loading: boolean = true; // Track loading state
-
-    @state()
-    private _error: string | null = null; // Track any errors
-
-    override firstUpdated() {
-        this.fetchInitialItems(); // Start fetching on component load
-    }
-
-    // Fetch initial items
-    async fetchInitialItems() {
-        try {
-            this._loading = true;
-            this._items = ((await MyMenuResource.getMenuApiV1()).items); // Fetch root-level items
-        } catch (e) {
-            this._error = 'Error fetching items';
-        } finally {
-            this._loading = false;
-        }
-    }
-
-    // Render items
-    renderItems(items: MyMenuItemResponseModel[]): TemplateResult {
-        return html`
-            ${items.map(element => html`
-                <uui-menu-item label="${element.name}" ?has-children=${element.hasChildren}>
-                ${element.type === 1
-                ? html`<uui-icon slot="icon" name="icon-folder"></uui-icon>`
-                : html`<uui-icon slot="icon" name="icon-autofill"></uui-icon>`}
-                    <!-- recursively render children -->
-                    ${element.hasChildren ? this.renderItems(element.children) : ''}
-                </uui-menu-item>
-            `)}
-        `;
-    }
-
-    // Main render function
-    override render() {
-        if (this._loading) {
-            return html`<uui-loader></uui-loader>`;
-        }
-
-        if (this._error) {
-            return html`<uui-menu-item active disabled label="Could not load form tree!">
-        </uui-menu-item>`;
-        }
-
-        // Render items if loading is done and no error occurred
-        return this.renderItems(this._items);
-    }
-}
-
-export { MyMenuItems as element };
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [elementName]: MyMenuItems;
-    }
-}
-```
-{% endcode %}
-
-## Tree Menu Item
-
-### Manifest
-
-```json
-{
- "type": "menuItem",
- "kind": "tree",
- "alias": "My.TreeMenuItem",
- "name": "My Tree Menu Item",
- "meta": {
-  "label": "My Tree Menu Item",
-  "menus": ["My.Menu"]
- }
-}
-```
-
 #### Default Element
 
 The default element supports rendering a subtree of menu items.
@@ -282,14 +177,21 @@ To add a menu item to an existing menu, use the `meta.menus` property.
 {% code title="umbraco-package.json" %}
 ```json
 {
-    "type": "menuItem", 
-    "alias": "My.MenuItem", 
-    "name": "My Menu Item", 
-    "meta": {
-        "label": "My Menu Item", 
-        "menus": ["Umb.Menu.Content"]
-    },
-    "element": "menu-items.js"
+    "$schema": "../../umbraco-package-schema.json",
+    "name": "My Package",
+    "version": "0.1.0",
+    "extensions": [
+        {
+            "type": "menuItem",
+            "alias": "My.MenuItem",
+            "name": "My Menu Item",
+            "meta": {
+                "label": "My Menu Item",
+                "menus": ["Umb.Menu.Content"]
+            },
+            "element": "menu-items.js"
+        }
+    ]
 }
 ```
 {% endcode %}