From 752dbb85df3242d48f0227e86ea0e06d5c63395f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <yari.marien@numble.be>
Date: Tue, 24 Sep 2024 20:46:45 +0200
Subject: [PATCH 1/8] Menu(v14): added typescript manifest examples + lit
 element example + explanation

---
 .../extension-types/menu.md                   | 150 +++++++++++++++++-
 1 file changed, 143 insertions(+), 7 deletions(-)

diff --git a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index 5fb8fa401f6..3c7639e78ff 100644
--- a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -4,11 +4,10 @@
 This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
 {% endhint %}
 
-## Menu
-
 <figure><img src="../../../.gitbook/assets/menu.png" alt="" width="250"><figcaption><p>Menu</p></figcaption></figure>
 
-```typescript
+**JSON Manifest:**
+```json
 {
  "type": "menu",
  "alias": "My.Menu",
@@ -16,15 +15,38 @@ This page is a work in progress and may undergo further revisions, updates, or a
 }
 ```
 
-### Menu Item <a href="#menu-item" id="menu-item"></a>
+**Typescript Manifest:**
+```typescript
+import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
+
+const menuManifest: Array<ManifestMenu> = [
+    {
+        type: 'menu',
+        alias: 'My.Menu',
+        name: 'My Menu'
+    }
+];
+```
+
+
+## Menu Item <a href="#menu-item" id="menu-item"></a>
 
 <figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
 
-```typescript
+### What is a Menu Item?
+
+Menu items are the items that appear in the menu. 
+
+For adding custom menu items we can define a single MenuItem manifest and link an element to it. In this element we can fetch the data and render as many menu items as we want based on that data.
+
+### JSON Manifest
+
+```json
 {
  "type": "menuItem",
  "alias": "My.MenuItem",
  "name": "My Menu Item",
+ "element": "./menu-items.ts",
  "meta": {
   "label": "My Menu Item",
   "menus": ["My.Menu"]
@@ -32,9 +54,123 @@ This page is a work in progress and may undergo further revisions, updates, or a
 }
 ```
 
-### **Tree Menu Item**
+### Typescript Manifest
+```typescript
+const menuItemManifest: Array<ManifestMenuItem> = [
+    {
+        type: 'menuItem',
+        alias: 'My.MenuItem',
+        name: 'My Menu Item',
+        meta: {
+            label: 'My Menu Item',
+            menus: ["My.Menu"]
+        },
+        element: () => import('./menu-items.ts')
+    }
+];
+```
+
+### The Lit Element
+
+#### Rendering menu items with Umbraco's UI menu item component
+
+To render your menu items in Umbraco, you can make use of the powerful [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to easily create nested menu structures with just a few lines of code.
+
+To display the caret icon indicating nested items, you can set the `has-children` attribute dynamically like this: `?has-children=${bool}`.
+
+**Example:**
+
+```tsx
+<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
+
+Using this Lit element we can fetch the data and render the menu items. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
+
+**menu-items.ts:**
+```typescript
+import { UmbMenuItemElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, TemplateResult } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+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
+
+    constructor() {
+        super();
+        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
+    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 html`${this.renderItems(this._items)}`;
+    }
+}
+
+export { MyMenuItems as element };
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: MyMenuItems;
+    }
+}
+
+```	
+
+## **Tree Menu Item**
 
-#### **Manifest**
+### **Manifest**
 
 ```typescript
 // it will be something like this

From 86f59a9f7331b6cec8db123f33407e265dcaa9a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <yari.marien@numble.be>
Date: Tue, 24 Sep 2024 20:47:37 +0200
Subject: [PATCH 2/8] Menu(v15): added typescript manifest examples + lit
 element example + explanation

---
 .../extension-types/menu.md                   | 150 +++++++++++++++++-
 1 file changed, 143 insertions(+), 7 deletions(-)

diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index 5fb8fa401f6..3c7639e78ff 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -4,11 +4,10 @@
 This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
 {% endhint %}
 
-## Menu
-
 <figure><img src="../../../.gitbook/assets/menu.png" alt="" width="250"><figcaption><p>Menu</p></figcaption></figure>
 
-```typescript
+**JSON Manifest:**
+```json
 {
  "type": "menu",
  "alias": "My.Menu",
@@ -16,15 +15,38 @@ This page is a work in progress and may undergo further revisions, updates, or a
 }
 ```
 
-### Menu Item <a href="#menu-item" id="menu-item"></a>
+**Typescript Manifest:**
+```typescript
+import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
+
+const menuManifest: Array<ManifestMenu> = [
+    {
+        type: 'menu',
+        alias: 'My.Menu',
+        name: 'My Menu'
+    }
+];
+```
+
+
+## Menu Item <a href="#menu-item" id="menu-item"></a>
 
 <figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
 
-```typescript
+### What is a Menu Item?
+
+Menu items are the items that appear in the menu. 
+
+For adding custom menu items we can define a single MenuItem manifest and link an element to it. In this element we can fetch the data and render as many menu items as we want based on that data.
+
+### JSON Manifest
+
+```json
 {
  "type": "menuItem",
  "alias": "My.MenuItem",
  "name": "My Menu Item",
+ "element": "./menu-items.ts",
  "meta": {
   "label": "My Menu Item",
   "menus": ["My.Menu"]
@@ -32,9 +54,123 @@ This page is a work in progress and may undergo further revisions, updates, or a
 }
 ```
 
-### **Tree Menu Item**
+### Typescript Manifest
+```typescript
+const menuItemManifest: Array<ManifestMenuItem> = [
+    {
+        type: 'menuItem',
+        alias: 'My.MenuItem',
+        name: 'My Menu Item',
+        meta: {
+            label: 'My Menu Item',
+            menus: ["My.Menu"]
+        },
+        element: () => import('./menu-items.ts')
+    }
+];
+```
+
+### The Lit Element
+
+#### Rendering menu items with Umbraco's UI menu item component
+
+To render your menu items in Umbraco, you can make use of the powerful [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to easily create nested menu structures with just a few lines of code.
+
+To display the caret icon indicating nested items, you can set the `has-children` attribute dynamically like this: `?has-children=${bool}`.
+
+**Example:**
+
+```tsx
+<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
+
+Using this Lit element we can fetch the data and render the menu items. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
+
+**menu-items.ts:**
+```typescript
+import { UmbMenuItemElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, TemplateResult } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+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
+
+    constructor() {
+        super();
+        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
+    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 html`${this.renderItems(this._items)}`;
+    }
+}
+
+export { MyMenuItems as element };
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: MyMenuItems;
+    }
+}
+
+```	
+
+## **Tree Menu Item**
 
-#### **Manifest**
+### **Manifest**
 
 ```typescript
 // it will be something like this

From 2b7dacb1aa7dc9f2a8ede4a6e70f0be870ea2426 Mon Sep 17 00:00:00 2001
From: sofietoft <stk@umbraco.com>
Date: Wed, 9 Oct 2024 10:48:01 +0200
Subject: [PATCH 3/8] Updated grammar and headings

---
 .../extension-types/menu.md                   | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index 3c7639e78ff..a25ac18d0ab 100644
--- a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -28,16 +28,15 @@ const menuManifest: Array<ManifestMenu> = [
 ];
 ```
 
-
-## Menu Item <a href="#menu-item" id="menu-item"></a>
+## Menu Item
 
 <figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
 
-### What is a Menu Item?
-
 Menu items are the items that appear in the menu. 
 
-For adding custom menu items we can define a single MenuItem manifest and link an element to it. In this element we can fetch the data and render as many menu items as we want based on that data.
+To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
+
+The code snippets below show how to declare a new menu item using JSON or Typescript.
 
 ### JSON Manifest
 
@@ -55,6 +54,7 @@ For adding custom menu items we can define a single MenuItem manifest and link a
 ```
 
 ### Typescript Manifest
+
 ```typescript
 const menuItemManifest: Array<ManifestMenuItem> = [
     {
@@ -70,13 +70,13 @@ const menuItemManifest: Array<ManifestMenuItem> = [
 ];
 ```
 
-### The Lit Element
+### The UI Element
 
 #### Rendering menu items with Umbraco's UI menu item component
 
-To render your menu items in Umbraco, you can make use of the powerful [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to easily create nested menu structures with just a few lines of code.
+To render your menu items in Umbraco, you can use the [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to create nested menu structures with a few lines of code.
 
-To display the caret icon indicating nested items, you can set the `has-children` attribute dynamically like this: `?has-children=${bool}`.
+By default, you can set the `has-children` attribute to display the caret icon indicating nested items. It will look like this: `?has-children=${bool}`.
 
 **Example:**
 
@@ -89,7 +89,7 @@ To display the caret icon indicating nested items, you can set the `has-children
 
 #### Custom menu item element example
 
-Using this Lit element we can fetch the data and render the menu items. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
+You can fetch the data and render the menu items using the Lit element above. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
 
 **menu-items.ts:**
 ```typescript
@@ -168,9 +168,9 @@ declare global {
 
 ```	
 
-## **Tree Menu Item**
+## Tree Menu Item
 
-### **Manifest**
+### Manifest
 
 ```typescript
 // it will be something like this
@@ -186,14 +186,14 @@ declare global {
 }
 ```
 
-#### **Default Element**
+#### Default Element
 
 ```typescript
 // get interface
 interface UmbTreeMenuItemElement {}
 ```
 
-### **Adding menu items to an existing menu**
+### Adding menu items to an existing menu
 
 The backoffice comes with a couple of menus.
 

From 35effb1e9e024fa9f9d05dbf2e261c389de1da49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <yari.marien@numble.be>
Date: Wed, 9 Oct 2024 21:11:34 +0200
Subject: [PATCH 4/8] Menu: Added more context and structure

---
 .../extension-types/menu.md                   | 53 +++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index a25ac18d0ab..870b91b07f1 100644
--- a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -6,7 +6,20 @@ This page is a work in progress and may undergo further revisions, updates, or a
 
 <figure><img src="../../../.gitbook/assets/menu.png" alt="" width="250"><figcaption><p>Menu</p></figcaption></figure>
 
-**JSON Manifest:**
+## Creating a custom menu
+
+In this section, you can learn how to register and create a custom Menu for the Umbraco backoffice.
+
+### Manifest
+
+The manifest file can be created using either JSON or Typescript. Both methods are shown below.
+
+{% tabs %}
+
+{% tab title="Json" %}
+
+We can create the manifest using json in the umbraco-package.json.
+
 ```json
 {
  "type": "menu",
@@ -14,8 +27,14 @@ This page is a work in progress and may undergo further revisions, updates, or a
  "name": "My Menu"
 }
 ```
+{% endtab %}
+
+{% tab title="Typescript" %}
+
+The manifest can also be written in TypeScript.
+
+For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
-**Typescript Manifest:**
 ```typescript
 import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
 
@@ -28,17 +47,31 @@ const menuManifest: Array<ManifestMenu> = [
 ];
 ```
 
-## Menu Item
+{% endtab %}
+
+{% endtabs %}
+
+# Menu Item
 
 <figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
 
 Menu items are the items that appear in the menu. 
 
+## Creating a custom menu items
+
+In this section, you can learn how to add custom Menu Items to your Umbraco backoffice Menu.
+
+### Manifest
+
 To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
 
 The code snippets below show how to declare a new menu item using JSON or Typescript.
 
-### JSON Manifest
+{% tabs %}
+
+{% tab title="Json" %}
+
+We can create the manifest using json in the umbraco-package.json.
 
 ```json
 {
@@ -53,7 +86,13 @@ The code snippets below show how to declare a new menu item using JSON or Typesc
 }
 ```
 
-### Typescript Manifest
+{% endtab %}
+
+{% tab title="Typescript" %}
+
+The manifest can also be written in TypeScript.
+
+For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
 ```typescript
 const menuItemManifest: Array<ManifestMenuItem> = [
@@ -70,6 +109,10 @@ const menuItemManifest: Array<ManifestMenuItem> = [
 ];
 ```
 
+{% endtab %}
+
+{% endtabs %}
+
 ### The UI Element
 
 #### Rendering menu items with Umbraco's UI menu item component

From 80233be8f85b7467254d2bc2423d332661eb220d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <yari.marien@numble.be>
Date: Wed, 9 Oct 2024 21:28:01 +0200
Subject: [PATCH 5/8] Menu: Updated file names to use gitbook markup

---
 .../customizing/extending-overview/extension-types/menu.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index 870b91b07f1..b3829bf3cc6 100644
--- a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -94,6 +94,7 @@ The manifest can also be written in TypeScript.
 
 For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
+{% code title="manifest.ts" overflow="wrap" lineNumbers="true" %}
 ```typescript
 const menuItemManifest: Array<ManifestMenuItem> = [
     {
@@ -108,6 +109,8 @@ const menuItemManifest: Array<ManifestMenuItem> = [
     }
 ];
 ```
+{% endcode %}
+
 
 {% endtab %}
 
@@ -134,7 +137,7 @@ By default, you can set the `has-children` attribute to display the caret icon i
 
 You can fetch the data and render the menu items using the Lit element above. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
 
-**menu-items.ts:**
+{% code title="menu-items.ts" overflow="wrap" lineNumbers="true" %}
 ```typescript
 import { UmbMenuItemElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -210,6 +213,8 @@ declare global {
 }
 
 ```	
+{% endcode %}
+
 
 ## Tree Menu Item
 

From c672eb3e626c998e8e2d8ce6fdbc5721a13e63a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <yari.marien@numble.be>
Date: Wed, 9 Oct 2024 21:30:49 +0200
Subject: [PATCH 6/8] menu: updated v15 to match v14

---
 .../extension-types/menu.md                   | 82 +++++++++++++++----
 1 file changed, 65 insertions(+), 17 deletions(-)

diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index 3c7639e78ff..b3829bf3cc6 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -6,7 +6,20 @@ This page is a work in progress and may undergo further revisions, updates, or a
 
 <figure><img src="../../../.gitbook/assets/menu.png" alt="" width="250"><figcaption><p>Menu</p></figcaption></figure>
 
-**JSON Manifest:**
+## Creating a custom menu
+
+In this section, you can learn how to register and create a custom Menu for the Umbraco backoffice.
+
+### Manifest
+
+The manifest file can be created using either JSON or Typescript. Both methods are shown below.
+
+{% tabs %}
+
+{% tab title="Json" %}
+
+We can create the manifest using json in the umbraco-package.json.
+
 ```json
 {
  "type": "menu",
@@ -14,8 +27,14 @@ This page is a work in progress and may undergo further revisions, updates, or a
  "name": "My Menu"
 }
 ```
+{% endtab %}
+
+{% tab title="Typescript" %}
+
+The manifest can also be written in TypeScript.
+
+For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
-**Typescript Manifest:**
 ```typescript
 import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
 
@@ -28,18 +47,31 @@ const menuManifest: Array<ManifestMenu> = [
 ];
 ```
 
+{% endtab %}
 
-## Menu Item <a href="#menu-item" id="menu-item"></a>
+{% endtabs %}
 
-<figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
+# Menu Item
 
-### What is a Menu Item?
+<figure><img src="../../../.gitbook/assets/menu-item.png" alt="" width="250"><figcaption><p>Menu Item</p></figcaption></figure>
 
 Menu items are the items that appear in the menu. 
 
-For adding custom menu items we can define a single MenuItem manifest and link an element to it. In this element we can fetch the data and render as many menu items as we want based on that data.
+## Creating a custom menu items
+
+In this section, you can learn how to add custom Menu Items to your Umbraco backoffice Menu.
 
-### JSON Manifest
+### Manifest
+
+To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
+
+The code snippets below show how to declare a new menu item using JSON or Typescript.
+
+{% tabs %}
+
+{% tab title="Json" %}
+
+We can create the manifest using json in the umbraco-package.json.
 
 ```json
 {
@@ -54,7 +86,15 @@ For adding custom menu items we can define a single MenuItem manifest and link a
 }
 ```
 
-### Typescript Manifest
+{% endtab %}
+
+{% tab title="Typescript" %}
+
+The manifest can also be written in TypeScript.
+
+For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
+
+{% code title="manifest.ts" overflow="wrap" lineNumbers="true" %}
 ```typescript
 const menuItemManifest: Array<ManifestMenuItem> = [
     {
@@ -69,14 +109,20 @@ const menuItemManifest: Array<ManifestMenuItem> = [
     }
 ];
 ```
+{% endcode %}
+
 
-### The Lit Element
+{% endtab %}
+
+{% endtabs %}
+
+### The UI Element
 
 #### Rendering menu items with Umbraco's UI menu item component
 
-To render your menu items in Umbraco, you can make use of the powerful [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to easily create nested menu structures with just a few lines of code.
+To render your menu items in Umbraco, you can use the [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to create nested menu structures with a few lines of code.
 
-To display the caret icon indicating nested items, you can set the `has-children` attribute dynamically like this: `?has-children=${bool}`.
+By default, you can set the `has-children` attribute to display the caret icon indicating nested items. It will look like this: `?has-children=${bool}`.
 
 **Example:**
 
@@ -89,9 +135,9 @@ To display the caret icon indicating nested items, you can set the `has-children
 
 #### Custom menu item element example
 
-Using this Lit element we can fetch the data and render the menu items. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
+You can fetch the data and render the menu items using the Lit element above. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
 
-**menu-items.ts:**
+{% code title="menu-items.ts" overflow="wrap" lineNumbers="true" %}
 ```typescript
 import { UmbMenuItemElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -167,10 +213,12 @@ declare global {
 }
 
 ```	
+{% endcode %}
+
 
-## **Tree Menu Item**
+## Tree Menu Item
 
-### **Manifest**
+### Manifest
 
 ```typescript
 // it will be something like this
@@ -186,14 +234,14 @@ declare global {
 }
 ```
 
-#### **Default Element**
+#### Default Element
 
 ```typescript
 // get interface
 interface UmbTreeMenuItemElement {}
 ```
 
-### **Adding menu items to an existing menu**
+### Adding menu items to an existing menu
 
 The backoffice comes with a couple of menus.
 

From ef957a82f9e0f1fece43e71ee5410c2fc239d70c Mon Sep 17 00:00:00 2001
From: sofietoft <stk@umbraco.com>
Date: Thu, 10 Oct 2024 09:32:24 +0200
Subject: [PATCH 7/8] Updated some names

---
 .../extension-types/menu.md                   | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index b3829bf3cc6..632fbdb6157 100644
--- a/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/14/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -12,13 +12,13 @@ In this section, you can learn how to register and create a custom Menu for the
 
 ### Manifest
 
-The manifest file can be created using either JSON or Typescript. Both methods are shown below.
+The manifest file can be created using either JSON or TypeScript. Both methods are shown below.
 
 {% tabs %}
 
-{% tab title="Json" %}
+{% tab title="JSON" %}
 
-We can create the manifest using json in the umbraco-package.json.
+We can create the manifest using JSON in the `umbraco-package.json`.
 
 ```json
 {
@@ -29,11 +29,11 @@ We can create the manifest using json in the umbraco-package.json.
 ```
 {% endtab %}
 
-{% tab title="Typescript" %}
+{% tab title="TypeScript" %}
 
 The manifest can also be written in TypeScript.
 
-For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
+For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
 ```typescript
 import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
@@ -65,13 +65,13 @@ In this section, you can learn how to add custom Menu Items to your Umbraco back
 
 To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
 
-The code snippets below show how to declare a new menu item using JSON or Typescript.
+The code snippets below show how to declare a new menu item using JSON or TypeScript.
 
 {% tabs %}
 
-{% tab title="Json" %}
+{% tab title="JSON" %}
 
-We can create the manifest using json in the umbraco-package.json.
+We can create the manifest using JSON in the `umbraco-package.json`.
 
 ```json
 {
@@ -88,13 +88,13 @@ We can create the manifest using json in the umbraco-package.json.
 
 {% endtab %}
 
-{% tab title="Typescript" %}
+{% tab title="TypeScript" %}
 
 The manifest can also be written in TypeScript.
 
-For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
+For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
 
-{% code title="manifest.ts" overflow="wrap" lineNumbers="true" %}
+{% code title="manifest.ts" %}
 ```typescript
 const menuItemManifest: Array<ManifestMenuItem> = [
     {
@@ -137,7 +137,7 @@ By default, you can set the `has-children` attribute to display the caret icon i
 
 You can fetch the data and render the menu items using the Lit element above. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
 
-{% code title="menu-items.ts" overflow="wrap" lineNumbers="true" %}
+{% code title="menu-items.ts" %}
 ```typescript
 import { UmbMenuItemElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

From 2928f27cf44d47e09bcb9f0eaf5f90c8da375944 Mon Sep 17 00:00:00 2001
From: sofietoft <stk@umbraco.com>
Date: Thu, 10 Oct 2024 09:33:59 +0200
Subject: [PATCH 8/8] Tiny corrections

---
 .../extension-types/menu.md                   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
index b3829bf3cc6..533af4c5f91 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/menu.md
@@ -12,13 +12,13 @@ In this section, you can learn how to register and create a custom Menu for the
 
 ### Manifest
 
-The manifest file can be created using either JSON or Typescript. Both methods are shown below.
+The manifest file can be created using either JSON or TypeScript. Both methods are shown below.
 
 {% tabs %}
 
-{% tab title="Json" %}
+{% tab title="JSON" %}
 
-We can create the manifest using json in the umbraco-package.json.
+We can create the manifest using JSON in the `umbraco-package.json`.
 
 ```json
 {
@@ -29,11 +29,11 @@ We can create the manifest using json in the umbraco-package.json.
 ```
 {% endtab %}
 
-{% tab title="Typescript" %}
+{% tab title="TypeScript" %}
 
 The manifest can also be written in TypeScript.
 
-For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
+For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
 
 ```typescript
 import { ManifestMenu } from "@umbraco-cms/backoffice/extension-registry";
@@ -65,13 +65,13 @@ In this section, you can learn how to add custom Menu Items to your Umbraco back
 
 To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
 
-The code snippets below show how to declare a new menu item using JSON or Typescript.
+The code snippets below show how to declare a new menu item using JSON or TypeScript.
 
 {% tabs %}
 
-{% tab title="Json" %}
+{% tab title="JSON" %}
 
-We can create the manifest using json in the umbraco-package.json.
+We can create the manifest using JSON in the `umbraco-package.json`.
 
 ```json
 {
@@ -88,11 +88,11 @@ We can create the manifest using json in the umbraco-package.json.
 
 {% endtab %}
 
-{% tab title="Typescript" %}
+{% tab title="TypeScript" %}
 
 The manifest can also be written in TypeScript.
 
-For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests
+For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
 
 {% code title="manifest.ts" overflow="wrap" lineNumbers="true" %}
 ```typescript