> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-assets-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 顶部菜单栏

顶部菜单栏 API 允许扩展为 ComfyUI 的顶部菜单栏添加自定义菜单项。这对于提供高级功能或不常用命令的访问非常有用。

## 基本用法

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  // 定义命令
  commands: [
    { 
      id: "myCommand", 
      label: "我的命令", 
      function: () => { alert("命令已执行！"); } 
    }
  ],
  // 将命令添加到菜单
  menuCommands: [
    { 
      path: ["扩展", "我的扩展"], 
      commands: ["myCommand"] 
    }
  ]
});
```

命令定义方式与 [命令与快捷键绑定 API](./javascript_commands_keybindings) 相同。详细定义命令请参见该页面。

## 命令配置

每个命令都需要 `id`、`label` 和 `function`：

```javascript theme={null}
{
  id: string,              // 命令的唯一标识符
  label: string,           // 命令显示名称
  function: () => void     // 命令被触发时执行的函数
}
```

## 菜单配置

`menuCommands` 数组定义了命令在菜单结构中的位置：

```javascript theme={null}
{
  path: string[],          // 表示菜单层级的数组
  commands: string[]       // 要添加到该位置的命令 ID 数组
}
```

`path` 数组指定菜单层级。例如，`["文件", "导出"]` 会将命令添加到"文件"菜单下的"导出"子菜单。

## 菜单示例

### 添加到已有菜单

```javascript theme={null}
app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "另存为图片", 
      function: () => { 
        // 保存画布为图片的代码
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "导出工作流", 
      function: () => { 
        // 导出工作流的代码
      } 
    }
  ],
  menuCommands: [
    // 添加到文件菜单
    { 
      path: ["文件"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});
```

### 创建子菜单结构

```javascript theme={null}
app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "选项 1", 
      function: () => { console.log("选项 1"); } 
    },
    { 
      id: "option2", 
      label: "选项 2", 
      function: () => { console.log("选项 2"); } 
    },
    { 
      id: "suboption1", 
      label: "子选项 1", 
      function: () => { console.log("子选项 1"); } 
    }
  ],
  menuCommands: [
    // 创建嵌套菜单结构
    { 
      path: ["扩展", "我的工具"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["扩展", "我的工具", "高级"], 
      commands: ["suboption1"] 
    }
  ]
});
```

### 多个菜单位置

你可以将同一个命令添加到多个菜单位置：

```javascript theme={null}
app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "获取帮助", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // 添加到帮助菜单
    { 
      path: ["帮助"], 
      commands: ["helpCommand"] 
    },
    // 也添加到扩展菜单
    { 
      path: ["扩展"], 
      commands: ["helpCommand"] 
    }
  ]
});
```

命令可以与其他 ComfyUI API（如设置）配合使用。关于设置 API 的更多信息，请参见 [设置 API](./javascript_settings) 文档。