Skip to content
Electrobun Docs

Application Menu

Create and control an application menu. In MacOS this is the menu in the top-left with File, Edit, and so on.

import {ApplicationMenu} from "electrobun/bun";




ApplicationMenu.setApplicationMenu([
  {
    submenu: [{ label: "Quit", role: "quit" }],
  },
  {
    label: "Edit",
    submenu: [
      { role: "undo" },
      { role: "redo" },
      { type: "separator" },
      {
        label: "Custom Menu Item  🚀",
        action: "custom-action-1",
        tooltip: "I'm a tooltip",
      },
      {
        label: "Custom menu disabled",
        enabled: false,
        action: "custom-action-2",
      },
      { type: "separator" },
      { role: "cut" },
      { role: "copy" },
      { role: "paste" },
      { role: "pasteAndMatchStyle" },
      { role: "delete" },
      { role: "selectAll" },
    ],
  },
]);


Electrobun.events.on("application-menu-clicked", (e) => {
  console.log("application menu clicked", e.data.action); // custom-actino
});

setApplicationMenu

This function takes an array of menu items. Here are some example menu items:

// menu dividers
{type: "divider"}
// or
{type: "separator"}

Default Roles

Menu items can specify a role instead of an action. Use menu item roles to access built-in OS functionality and enable their corresponding keyboard shortcuts.

If you want to enable keyboard shortcuts like cmd+q to quit your application, cmd+c and cmd+v for copy and paste then you need to specify menu items with the corresponding roles.

// example Edit menu
 {
    label: "Edit",
    submenu: [
      // Corresponding keyboard shotcuts will automatically
      // be bound when a valid role is set.
      { role: "undo" },
      { role: "redo" },
      { type: "separator" },
      { role: "cut" },
      { role: "copy" },
      { role: "paste" },
      { role: "pasteAndMatchStyle" },
      { role: "delete" },
      { role: "selectAll" },
    ],
  },

List of supported roles

  <span style="color: rgb(229, 231, 235);">quit:</span> <span style="color: rgb(59, 130, 246);">"Quit"</span>,
  <span style="color: rgb(229, 231, 235);">hide:</span> <span style="color: rgb(59, 130, 246);">"Hide"</span>,
  <span style="color: rgb(229, 231, 235);">hideOthers:</span> <span style="color: rgb(59, 130, 246);">"Hide Others"</span>,
  <span style="color: rgb(229, 231, 235);">showAll:</span> <span style="color: rgb(59, 130, 246);">"Show All"</span>,
  <span style="color: rgb(229, 231, 235);">undo:</span> <span style="color: rgb(59, 130, 246);">"Undo"</span>,
  <span style="color: rgb(229, 231, 235);">redo:</span> <span style="color: rgb(59, 130, 246);">"Redo"</span>,
  <span style="color: rgb(229, 231, 235);">cut:</span> <span style="color: rgb(59, 130, 246);">"Cut"</span>,
  <span style="color: rgb(229, 231, 235);">copy:</span> <span style="color: rgb(59, 130, 246);">"Copy"</span>,
  <span style="color: rgb(229, 231, 235);">paste:</span> <span style="color: rgb(59, 130, 246);">"Paste"</span>,
  <span style="color: rgb(229, 231, 235);">pasteAndMatchStyle:</span> <span style="color: rgb(59, 130, 246);">"Paste And Match Style"</span>,
  <span style="color: rgb(229, 231, 235);">delete:</span> <span style="color: rgb(59, 130, 246);">"Delete"</span>,
  <span style="color: rgb(229, 231, 235);">selectAll:</span> <span style="color: rgb(59, 130, 246);">"Select All"</span>,
  <span style="color: rgb(229, 231, 235);">startSpeaking:</span> <span style="color: rgb(59, 130, 246);">"Start Speaking"</span>,
  <span style="color: rgb(229, 231, 235);">stopSpeaking:</span> <span style="color: rgb(59, 130, 246);">"Stop Speaking"</span>,
  <span style="color: rgb(229, 231, 235);">enterFullScreen:</span> <span style="color: rgb(59, 130, 246);">"Enter FullScreen"</span>,
  <span style="color: rgb(229, 231, 235);">exitFullScreen:</span> <span style="color: rgb(59, 130, 246);">"Exit FullScreen"</span>,
  <span style="color: rgb(229, 231, 235);">toggleFullScreen:</span> <span style="color: rgb(59, 130, 246);">"Toggle Full Screen"</span>,
  <span style="color: rgb(229, 231, 235);">minimize:</span> <span style="color: rgb(59, 130, 246);">"Minimize"</span>,
  <span style="color: rgb(229, 231, 235);">zoom:</span> <span style="color: rgb(59, 130, 246);">"Zoom"</span>,
  <span style="color: rgb(229, 231, 235);">bringAllToFront:</span> <span style="color: rgb(59, 130, 246);">"Bring All To Front"</span>,
  <span style="color: rgb(229, 231, 235);">close:</span> <span style="color: rgb(59, 130, 246);">"Close"</span>,
  <span style="color: rgb(229, 231, 235);">cycleThroughWindows:</span> <span style="color: rgb(59, 130, 246);">"Cycle Through Windows"</span>,
  <span style="color: rgb(229, 231, 235);">showHelp:</span> <span style="color: rgb(59, 130, 246);">"Show Help"</span>,

Custom Menu Items

Instead of a role you can specify and action, you can then listen for that action in the ‘application-menu-clicked’ event.

// basic menu item
{label: "I am a menu item", action: 'some-action'}

Optionaly properties

enabled

Set to false to show the menu item as disabled

checked

Set to true to show a checkbox next to the menu item.

hidden

Set to true to hide

tooltip

Will show this tooltip when hovering over the menu item

The top-level menu corresponds to the menu items you see when the app is focused, eg: File, Edit, View, etc. You can add actions to those if you want and treat them like buttons, but you can also add nested submenus.

accelerator

Set a custom keyboard shortcut for the menu item. This is useful when you want a custom action to have a keyboard shortcut that isn’t covered by the built-in roles.

// Custom menu item with keyboard shortcut
{
  label: "Save Project",
  action: "save-project",
  accelerator: "s"  // Will show as Cmd+S on macOS, Ctrl+S on Windows
}

The accelerator string specifies the key to bind. The default modifier is Command on macOS and Ctrl on Windows.

Platform Support

  • macOS: Full support for custom accelerators. The default modifier is Command.
  • Windows: Supports simple single-character accelerators (e.g., “s”, “n”, “o”). Complex combinations may not work as expected.
  • Linux: Application menus are not currently supported on Linux.

Note: If you use a role (like “copy” or “paste”), the OS automatically assigns the standard keyboard shortcut. Only use accelerator for custom actions.