Remove menubar from Electron app

Question

How do I remove this menu-bar from my electron apps     Also it says  Hello World  is this because I downloaded electron pre-built  and will go away once I package the application    I didn t code these into the html  so I don t know how to get it out -

User · Answer

Before this line at main js   mainWindow   new BrowserWindow  width  800  height  900    mainWindow setMenu null    this will r menu bar

User · Answer

The menu can be hidden or auto-hidden  like in Slack or VS Code - you can press Alt to show hide the menu    Relevant methods   ---- win setMenu menu  - Sets the menu as the window   s menu bar     setting it to null will remove the menu bar   This will remove the menu completly   mainWindow setMenu null      ---- win setAutoHideMenuBar hide  - Sets whether the window menu bar     should hide itself automatically  Once set the menu bar will only    show when users press the single Alt key   mainWindow setAutoHideMenuBar true    Source  https   github com Automattic simplenote-electron issues 293   There is also the method for making a frameless window as shown bellow    no close button no anything  Can be what we want  better design    const   BrowserWindow     require  electron   let win   new BrowserWindow   width  800  height  600  frame  false    win show     https   electronjs org docs api browser-window winremovemenu-linux-windows  doc  https   electronjs org docs api frameless-window  Edit   new      win removeMenu   Linux Windows Remove the window s menu bar    https   electronjs org docs api browser-window winremovemenu-linux-windows  Added win removeMenu   to remove application menus instead of using win setMenu null   That is added from v5 as per   https   github com electron electron pull 16570  https   github com electron electron pull 16657  Electron v7 bug  For Electron 7 1 1 use Menu setApplicationMenu instead of win removeMenu    as per this thread  https   github com electron electron issues 16521  And the big note is  you have to call it before creating the BrowserWindow  Or it will not work   const  app  BrowserWindow  Menu    require  electron    Menu setApplicationMenu null    const browserWindow   new BrowserWindow               UPDATE  Setting autoHideMenuBar on BrowserWindow construction   As by  kcpr comment  We can set the property and many on the constructor  That s available on the latest stable version of electron by now which is 8 3  But too in old versions i checked for v1  v2  v3  v4  It s there in all versions   As per this link https   github com electron electron blob 1-3-x docs api browser-window md  And for the v8 3 https   github com electron electron blob v8 3 0 docs api browser-window md new-browserwindowoptions  The doc link https   www electronjs org docs api browser-window new-browserwindowoptions  From the doc for the option      autoHideMenuBar Boolean  optional  - Auto hide the menu bar unless the Alt key is pressed  Default is false    Here a snippet to illustrate it    let browserWindow   new BrowserWindow       width  800      height  600      autoHideMenuBar  true     lt  lt  lt  here

User · Answer

For Electron 7 1 1  you can use this   const  app  BrowserWindow  Menu    require  electron   Menu setApplicationMenu false

User · Answer

electron     7 1 1      mainWindow   new browserWindow   height  500  width  800      mainWindow setAutoHideMenuBar true   mainWindow autoHideMenuBar   true    Working as expected without menu in browser

User · Answer

set autoHideMenuBar to true while creating the browserWindow mainWindow   new BrowserWindow       autoHideMenuBar  true      width  1200      height  800

User · Answer

According to the official documentation   https   github com electron electron blob v8 0 0-beta 1 docs api menu md the proper way to do this now since 7 1 2 and I have tested it on 8 0 as well is to    const   app  Menu     require  electron    Menu setApplicationMenu null

User · Answer

setMenu null   is the best answer   autohidemenu will display on the start of the application      function createWindow            const win   new BrowserWindow               width  1500              height  800              webPreferences                   nodeIntergration  true                                   win setMenu null       win loadFile  quot index html quot              app whenReady   then createWindow

User · Answer

Use this   mainWindow   new BrowserWindow  width  640  height  360   mainWindow setMenuBarVisibility false    Reference  https   github com electron electron issues 1415  I tried mainWindow setMenu null   but it didn t work

User · Answer

As of 7 0 0  most of the above solutions no longer work  BrowserWindow setMenu   has been replaced by Menu setApplicationMenu    which now changes the menu on all windows  setMenu    removeMenu   no longer do anything  Which by the way are still mentioned in the docs   setAutoHideMenuBar   still works  but could be a nuisance if you planned to use Alt as a hotkey modifier  Once menu is visible you have to click away from window  loose focus  to hide menu again   If your application has more than one window  you can t set remove menus separately on each window  The only way to remove a menu is to use the frameless window approach  That happens to be what I want in my current application  but not a good solution in all cases

User · Answer

2020 Update  the only bl  dy thing that worked for me  Menu setApplicationMenu new Menu

User · Answer

These solutions has bug  When use solutions at below  windows has delay at closing  Menu setApplicationMenu null    amp  amp  const updateErrorWindow   new BrowserWindow  autoHideMenuBar  true     I used solution at below  This is better for now  const window  new BrowserWindow         window setMenuBarVisibility false

User · Answer

Most of the answers here are not valid for newer versions  With the version of 9 0 or upper  Menu setApplicationMenu null   should work  By the way  Menu exported from electron package  const  Menu    require  electron

User · Answer

You can use w setMenu null  or set frame  false  this also removes  buttons for close  minimize and maximize options  on your window  See setMenu   or BrowserWindow    Also check this thread  Electron now has win removeMenu    added in v5 0 0   to remove application menus instead of using win setMenu null    Electron 7 1 x seems to have a bug where win removeMenu   doesn t work  The only workaround is to use Menu setApplicationMenu null

User · Answer

When you package your app the default menu won t be there anymore  if this is bugging you during development then you can call setMenu null  on the browser window as suggested by  TonyVincent

User · Answer

Following the answer from this issue  you must call Menu setApplicationMenu null  before the window is created

[node.js] Remove menubar from Electron app

Examples related to node.js

Examples related to electron