CODEWITHSUNDEEP
macosmenuelectron
charles ross
charles ross

Reputation: 572

Electron OSX application menu - how to add custom File menu?

I have an app (based on a magazine tute) with a menu that works fine on Windows and Ubuntu, but I have trouble getting the app level custom menu items to appear on MacOS. These menu items are File and View entries.

I have pored over the electron API docs and I see the special considerations for OSX, especially about the "role" attribute, but I am still stymied here. I am able to create menu items on OSX for the types of things listed in the API documents (such as "Edit" menu items using role, from a Renderer script) but not for my app.

Could my menu items be colliding with reserved "File/View" menu item names in the mac menu?

Here's the snip with my menu template string:

var SendEvent = function(name) {
 return function() {win.webContents.send(name);};
};

var template = [
 {label: 'File', submenu: [
  {label: 'New', click: SendEvent('file-new')},
  {label: 'Open', click: OpenFile},
  {label: 'Save', click: SendEvent('file-save')},
  {label: 'Save As', click: SendEvent('file-save-as')},
  {label: 'Close', click: SendEvent('file-close')},
  {type: 'separator'},
  {label: 'Quit', click: function() {app.quit();}}
 ]}, {label: 'View', submenu: [
  {label: 'HTML/Markdown', click: SendEvent('view-toggle')}
 ]}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));

Are there any other examples out there of apps with custom File and View menu actions that work on macOS?

Upvotes: 2

Views: 2097

Answers (1)

NullIsNot0
NullIsNot0

Reputation: 411

Menu.setApplicationMenu(Menu.buildFromTemplate(template)); should be called within createWindow() function:

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, "index_menus.html"),
        protocol: "file:",
        slashes: true
    }))

    mainWindow.on("closed", () => {
        mainWindow = null;
    });

    var template = [
      {label: 'File', submenu: [
        {label: 'New', click: SendEvent('file-new')},
        {label: 'Open', click: SendEvent('file-open')},
        {label: 'Save', click: SendEvent('file-save')},
        {label: 'Save As', click: SendEvent('file-save-as')},
        {label: 'Close', click: SendEvent('file-close')},
        {type: 'separator'},
        {label: 'Quit', click: function() {app.quit();}}
      ]},
      {label: 'View', submenu: [
        {label: 'HTML/Markdown', click: SendEvent('view-toggle')}
      ]}
    ];
    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}

If you use "File" menu, it will be placed under YourAppName menu (the first one) on macOS.

Upvotes: 1

Related Questions