A flyout menu in Photoshop is shown when the user clicks on the hamburger icon at the top right of your panel. You can use them to invoke operations that, for one reason or another, you don't want to take up real estate on your panel.

For flexibility, flyout menus are defined by supplying a JSON structure to UXP at runtime, as in the example below.

Flyout menus are defined by a JSON structure that's passed to the UXP entrypoints.setup method. The JSON tells UXP what the menuitems are, and what to do when they're invoked. In the following example, there are three starship-related menuitems. When a menuitem is chosen by the user ("invoked"), UXP calls the plugin-defined function handleFlyout.

const { entrypoints } = require("uxp");
// the setup() function tells UXP how to handle
// the entrypoints defined in your manifest.json file.
entrypoints.setup({
  panels: {
    my_panel_entrypoint: {
      show() {
        // put any initialization code for your plugin here.
      },
      menuItems: [
        {id: "setWarpFactor", label: "Warp Factor 1"},
        {id: "raiseShields", label: "Shields Up"},
        {id: "makeItSo", label: "Engage"}
      ],
      invokeMenu(id) {
        handleFlyout(id);
      }
    }
  }
});
Copied to your clipboard
1const { entrypoints } = require("uxp");
2// the setup() function tells UXP how to handle
3// the entrypoints defined in your manifest.json file.
4entrypoints.setup({
5  panels: {
6    my_panel_entrypoint: {
7      show() {
8        // put any initialization code for your plugin here.
9      },
10      menuItems: [
11        {id: "setWarpFactor", label: "Warp Factor 1"},
12        {id: "raiseShields", label: "Shields Up"},
13        {id: "makeItSo", label: "Engage"}
14      ],
15      invokeMenu(id) {
16        handleFlyout(id);
17      }
18    }
19  }
20});

Handling Flyouts

The handleFlyout function (defined above) gets passed the flyout menu id. It can use this id to dispatch code to handle each menuitem, as shown below.

function handleFlyout(id) {
  switch (id) {
    case "setWarpFactor": {
        console.log("Aye captain");
        break;
    }
    case "raiseShields": {
        console.log("Shields at 40 percent");
        break;
    }
    case "makeItSo": {
        console.log("Warp drive is offline");
        break;
    }
  }
}
Copied to your clipboard
1function handleFlyout(id) {
2  switch (id) {
3    case "setWarpFactor": {
4        console.log("Aye captain");
5        break;
6    }
7    case "raiseShields": {
8        console.log("Shields at 40 percent");
9        break;
10    }
11    case "makeItSo": {
12        console.log("Warp drive is offline");
13        break;
14    }
15  }
16}