Remove menubar from Electron app

In an Electron application, to remove the entire menu bar, you can set autoHideMenuBar to true when creating the BrowserWindow, or use the setMenu(null) method after the window is created. Here is an example implementation:

Using autoHideMenuBar

javascript
const { app, BrowserWindow } = require('electron');

function createWindow () {
  // Create browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    autoHideMenuBar: true  // Set auto-hide menu bar here
  });

  // Load application's index.html
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

In this example, pressing the Alt key temporarily reveals the menu bar, allowing users to access it when needed, while it remains hidden by default.

Using setMenu(null)

javascript
const { app, BrowserWindow, Menu } = require('electron');

function createWindow () {
  // Create browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Load application's index.html
  win.loadFile('index.html');

  // Remove menu bar after the window is ready
  win.once('ready-to-show', () => {
    win.setMenu(null);  // Remove menu bar here
  });
}

app.whenReady().then(createWindow);

In this example, setMenu(null) completely removes the menu bar and does not display it when pressing the Alt key. If you want the menu bar to be completely hidden throughout the application's lifecycle, this is a suitable choice.

Note that these methods may have different effects on different operating systems. On certain operating systems (especially macOS), even with setMenu(null), the top application menu may still exist but is restricted to include only a few system default menu items. In such cases, you may need to customize the menu more deeply to achieve the desired effect.