I am trying to add custom title bar in Electron js for Windows. So to hide the default title bar I wrote:
mainWindow = new BrowserWindow({
frame: false
});
But the above code hides the menu bar too. I want only the default title bar gone, without effecting the menu bar. Is there any way to achieve this?
Setting Electron's frame option to false creates a frameless window.
A frameless window does not have a title bar or menu. This is known as having no chrome.
From here you can build your own custom title bar with minimise, restore, maximise and close button functionality. If your application is being designed to work on different Operating Systems then you may wish to replicate button position, shapes and functionality.
Unfortunately, a side effect of using a frameless window is that you do lose your native menu. Again, this can be re-created using HTML, CSS and JS. That said, it will require a bit of work if you again wish to mimic more than one particular Operating System and be true to its design.
Alternatively, you can run with the one style of title bar and menu design across all Operating Systems. The choice is yours as a designer.
In summary, whilst it is possible to implement all of the above, it can be time consuming to set it up correctly. As a result, you really do need to weigh up if a custom title bar is worth the effort required to implement.