> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# API del menú de la barra superior de ComfyUI

> Agrega comandos personalizados al menú de la barra superior de ComfyUI: añádelos a menús existentes, crea submenús o coloca un comando en varias ubicaciones.

La API Topbar Menu permite a las extensiones agregar elementos de menú personalizados a la barra de menú superior de ComfyUI. Resulta útil para dar acceso a funciones avanzadas o a comandos que se usan con menos frecuencia.

## Uso básico

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  // Define los comandos
  commands: [
    { 
      id: "myCommand", 
      label: "My Command", 
      function: () => { alert("Command executed!"); } 
    }
  ],
  // Agrega comandos al menú
  menuCommands: [
    { 
      path: ["Extensions", "My Extension"], 
      commands: ["myCommand"] 
    }
  ]
});
```

Las definiciones de comandos siguen el mismo patrón que en la [API de comandos y atajos de teclado](https://docs.comfy.org/es/custom-nodes/js/javascript_commands_keybindings.md). Consulta esa página para obtener información más detallada sobre cómo definir comandos.

## Configuración de comandos

Cada comando requiere un `id`, un `label` y una `function`:

```javascript theme={null}
{
  id: string,              // Unique identifier for the command
  label: string,           // Display name for the command
  function: () => void     // Function to execute when command is triggered
}
```

## Configuración del menú

El arreglo `menuCommands` define dónde colocar los comandos dentro de la estructura del menú:

```javascript theme={null}
{
  path: string[],          // Arreglo que representa la jerarquía del menú
  commands: string[]       // Arreglo de IDs de comandos para agregar en esta ubicación
}
```

El arreglo `path` especifica la jerarquía del menú. Por ejemplo, `["File", "Export"]` agregaría comandos al submenú "Export" dentro del menú "File".

## Ejemplos de menú

### Agregar a menús existentes

```javascript theme={null}
app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "Save as Image", 
      function: () => { 
        // Código para guardar el lienzo como imagen
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "Export Workflow", 
      function: () => { 
        // Código para exportar el flujo de trabajo
      } 
    }
  ],
  menuCommands: [
    // Agregar al menú File
    { 
      path: ["File"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});
```

### Crear una estructura de submenú

```javascript theme={null}
app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "Option 1", 
      function: () => { console.log("Option 1"); } 
    },
    { 
      id: "option2", 
      label: "Option 2", 
      function: () => { console.log("Option 2"); } 
    },
    { 
      id: "suboption1", 
      label: "Sub-option 1", 
      function: () => { console.log("Sub-option 1"); } 
    }
  ],
  menuCommands: [
    // Crear una estructura de menú anidada
    { 
      path: ["Extensions", "My Tools"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["Extensions", "My Tools", "Advanced"], 
      commands: ["suboption1"] 
    }
  ]
});
```

### Varias ubicaciones de menú

Puedes agregar el mismo comando en varias ubicaciones de menú:

```javascript theme={null}
app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "Get Help", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // Agregar al menú Help
    { 
      path: ["Help"], 
      commands: ["helpCommand"] 
    },
    // También agregar al menú Extensions
    { 
      path: ["Extensions"], 
      commands: ["helpCommand"] 
    }
  ]
});
```

Los comandos pueden funcionar con otras API de ComfyUI, como las configuraciones. Para obtener más información sobre la API de configuraciones, consulta la documentación de la [API de configuraciones](https://docs.comfy.org/es/custom-nodes/js/javascript_settings.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.