From 3c99172431274da77ef8e6aedcd6e45845edaf4c Mon Sep 17 00:00:00 2001
From: skflowne <1980370+skflowne@users.noreply.github.com>
Date: Tue, 4 Feb 2025 00:45:02 +0100
Subject: [PATCH] Added an example for custom command + menu in the top bar

---
 custom-nodes/javascript_examples.mdx | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/custom-nodes/javascript_examples.mdx b/custom-nodes/javascript_examples.mdx
index 62461e6c..c533aae8 100644
--- a/custom-nodes/javascript_examples.mdx
+++ b/custom-nodes/javascript_examples.mdx
@@ -133,3 +133,34 @@ async nodeCreated(node) {
     }
 }
 ```
+
+## Customizing the UI
+
+### Add a custom menu in the top bar
+
+You can add `commands` to your extension and add them to the top bar menu using `menuCommands`
+- [MenuCommandGroup definition](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/types/comfy.ts)
+- [ComfyCommand definition](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/stores/commandStore.ts)
+
+```javascript
+import { api } from "../../scripts/api.js";
+
+app.registerExtension({
+    name: "example.extension.commands",
+    commands: [ // list of ComfyCommand
+        {
+            id: "my.custom.command", // command id
+            label: "My Custom Command",
+            function: () => {
+                console.log("executed custom command")
+            },
+        },
+    ],
+    menuCommands: [ // list of MenuCommandGroup
+        {
+            path: ["Custom", "Commands"],
+            commands: ["my.custom.command"], // list of command ids
+        },
+    ],
+})
+```
\ No newline at end of file