macoselectronnstoolbar

Customize Toolbar in Electron for MacOS

I've been looking in Electron docs about toolbar customization in MacOS. The default toolbar has only the window buttons and the page title, as image below.

This is default toolbar, I'd like to insert some buttons and customize it as it was an NSToolbar in Swift.

enter image description here

Any Idea would be great

Solution

  • You can hide the default one by passing the prop titleBarStyle: hidden

    const win = new BrowserWindow({ titleBarStyle: 'hidden' })

    This'll keep the standard window controls (traffic lights) on top of your web-page content.

    Then you can "customize" your own toolbar by positioning html-elements where the toolbar should have been.

    Make sure to add:

    #menu-bar {
 ....
... 
-webkit-app-region: drag;
}

    to your menubar element.

    https://www.electronjs.org/docs/api/frameless-window#hidden https://www.electronjs.org/docs/api/frameless-window#windows-control-overlay

    or you can look into the custom-electron-titlebar library

    https://github.com/AlexTorresSk/custom-electron-titlebar