diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/menu-item.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/menu-item.svg
new file mode 100644
index 0000000000..89f8731ca3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/menu-item.svg
@@ -0,0 +1,13 @@
+<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="74" fill="white"/>
+<path d="M11 58L14.4641 64H7.5359L11 58Z" fill="#848484"/>
+<rect x="20" y="60" width="40" height="2" fill="#848484"/>
+<path d="M11 42L14.4641 48H7.5359L11 42Z" fill="#848484"/>
+<rect x="20" y="44" width="40" height="2" fill="#848484"/>
+<path d="M11 26L14.4641 32H7.5359L11 26Z" fill="#848484"/>
+<rect x="20" y="28" width="40" height="2" fill="#848484"/>
+<path d="M11 10L14.4641 16H7.5359L11 10Z" fill="#848484"/>
+<rect x="20" y="12" width="40" height="2" fill="#848484"/>
+<path opacity="0.8" d="M0 0H70V22H0V0Z" fill="#D9D9D9"/>
+<path opacity="0.8" d="M0 36H70V74H0V36Z" fill="#D9D9D9"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/menu.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/menu.svg
new file mode 100644
index 0000000000..27c6acea65
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/menu.svg
@@ -0,0 +1,11 @@
+<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="74" fill="white"/>
+<path d="M11 58L14.4641 64H7.5359L11 58Z" fill="#848484"/>
+<rect x="20" y="60" width="40" height="2" fill="#848484"/>
+<path d="M11 42L14.4641 48H7.5359L11 42Z" fill="#848484"/>
+<rect x="20" y="44" width="40" height="2" fill="#848484"/>
+<path d="M11 26L14.4641 32H7.5359L11 26Z" fill="#848484"/>
+<rect x="20" y="28" width="40" height="2" fill="#848484"/>
+<path d="M11 10L14.4641 16H7.5359L11 10Z" fill="#848484"/>
+<rect x="20" y="12" width="40" height="2" fill="#848484"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/menu.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/menu.mdx
index 3e50e24de9..7082738d66 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/menu.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/menu.mdx
@@ -7,7 +7,7 @@ import { Meta } from '@storybook/addon-docs';
 TODO: introduction to the menu
 The menu is still work in progress
 
-<img src="docs/section.svg" width="400" />
+<img src="docs/menu.svg" width="150" />
 
 ```json
 {
@@ -21,7 +21,7 @@ The menu is still work in progress
 
 TODO: introduction to the menu item
 
-<img src="docs/section.svg" width="400" />
+<img src="docs/menu-item.svg" width="150" />
 
 ```json
 {
@@ -35,6 +35,33 @@ TODO: introduction to the menu item
 }
 ```
 
+#### Tree Menu Item
+
+// TODO adds docs when we have extension kinds
+
+**Manifest**
+
+```json
+// it will be something like this
+{
+	"type": "menuItem",
+	"kind": "tree",
+	"alias": "My.TreeMenuItem",
+	"name": "My Tree Menu Item",
+	"meta": {
+		"label": "My Tree Menu Item",
+		"menus": ["My.Menu"]
+	}
+}
+```
+
+**Default Element**
+
+```ts
+// get interface
+interface UmbTreeMenuItemElement {}
+```
+
 #### Adding menu items to an existing menu
 
 The backoffice comes with a couple of menus.