Menu problem in MAC OS [FIXED]

EDIT :: OK I fixed the problem, but it is really not clear in Electron doc, so I let the solution here (there are comments in stackoverflow’s post https://stackoverflow.com/questions/40440666/native-menus-not-showing-os-x-electron)

See edit. Tried that originally, still no app menu. – thephpdev Nov 6 '16 at 10:44
1
@thephpdev You have to call Menu.setApplicationMenu() after the app is ready, so move that call into createWindow(). – Vadim Macagon Nov 6 '16 at 10:53
I see. I feel a bit thick now, I thought I'd tried that, but I realise now that I called mainWindow.setMenu(). I'm new to electron, this is my first electron app, in case you're interested. github.com/CaelanStewart/Mathulator – thephpdev Nov 6 '16 at 11:34
Totally worked. – meriadec Apr 11 '17 at 21:20

Hello Everybody

I can’t have the menu I want. I’m creating a new project from scratch. I just adding to src/main/index.js the code from the official electron site :

const {app, Menu} = require('electron')
  
  const template = [
    {
      label: 'Edit',
      submenu: [
        {role: 'undo'},
        {role: 'redo'},
        {type: 'separator'},
        {role: 'cut'},
        {role: 'copy'},
        {role: 'paste'},
        {role: 'pasteandmatchstyle'},
        {role: 'delete'},
        {role: 'selectall'}
      ]
    },
    {
      label: 'View',
      submenu: [
        {role: 'reload'},
        {role: 'forcereload'},
        {role: 'toggledevtools'},
        {type: 'separator'},
        {role: 'resetzoom'},
        {role: 'zoomin'},
        {role: 'zoomout'},
        {type: 'separator'},
        {role: 'togglefullscreen'}
      ]
    },
    {
      role: 'window',
      submenu: [
        {role: 'minimize'},
        {role: 'close'}
      ]
    },
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More',
          click () { require('electron').shell.openExternal('https://electronjs.org') }
        }
      ]
    }
  ]
  
  if (process.platform === 'darwin') {
    template.unshift({
      label: app.getName(),
      submenu: [
        {role: 'about'},
        {type: 'separator'},
        {role: 'services', submenu: []},
        {type: 'separator'},
        {role: 'hide'},
        {role: 'hideothers'},
        {role: 'unhide'},
        {type: 'separator'},
        {role: 'quit'}
      ]
    })
  
    // Edit menu
    template[1].submenu.push(
      {type: 'separator'},
      {
        label: 'Speech',
        submenu: [
          {role: 'startspeaking'},
          {role: 'stopspeaking'}
        ]
      }
    )
  
    // Window menu
    template[3].submenu = [
      {role: 'close'},
      {role: 'minimize'},
      {role: 'zoom'},
      {type: 'separator'},
      {role: 'front'}
    ]
  }
  
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)

And I clearly dont have it :

The menu is working for linux. Is this a bug or am I doing something wrong ??

Thank you

[bchellingworth]

So after some research it seems that on mac, the name of the first menu is the name of the application, since the application you are using (at least to start with) is simply ‘Electron’ thats what the first menu items gets called (this is the OS doing this).

Once you package your project for distribution and give it a name, e.g. ‘myApp’ you will see this menu item change to ‘myApp’

It would seem you cannot have the first item being ‘File’ or whatever on mac. Once I read this it became quite obvious since every other application in mac OS behaves the same.

[cjstage]

This does work, yet its not adding an edit menu. But i adds all to main app menu.

Try adding to the template object array like this:

Menu.setApplicationMenu(Menu.buildFromTemplate([
    {
      label: app.getName(),
      submenu: [
        { role: 'about' },
        { type: 'separator' },
        { role: 'services' },
        { type: 'separator' },
        { role: 'hide' },
        { role: 'hideothers' },
        { role: 'unhide' },
        { type: 'separator' },
        { role: 'quit' }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
        { role: 'pasteandmatchstyle' },
        { role: 'delete' },
        { role: 'selectall' },
        { type: 'separator' },
        { role: 'reload' },
        { role: 'toggleFullScreen' },
        { role: 'toggleDevTools' },
        { type: 'separator' },
        { role: 'quit' }
      ]
    }
  ]));
`
This worked in my project.