Menu
I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:
868
Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need. Show activity on this post. Then you could use the css properties -webkit-user-select and -webkit-app-region to specify the drag zone.
There's no way at the moment to customize the native titlebar. So, first step is to hide the native titlebar by telling your BrowserWindow to hide the frame (that would also hide the menubar). Then, you should create your custom titlebar (or import a third party library like 1 or 2) in HTML, CSS and JS.
To remove menu bar from Electron app, we can set the autoHideMenuBar to true . to create a BrowserWindow instance by passing in an object with autoHideMenuBar set to true . As a result, the menu bar would be hidden in the app.
Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need.
Electron/webkit provides CSS properties that allows you to make any element draggable, like a titlebar:
.titlebar { -webkit-user-select: none; -webkit-app-region: drag; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
