In this guide, we’ll walk through the steps to create a sleek, functional custom title bar in Electron.js—complete with window controls (minimize, maximize, close) and a draggable area. Let’s dive in!

Remove the default title bar

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

function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden'
})
win.loadURL('https://example.com')
}

app.whenReady().then(() => {
createWindow()
})

Add native window controls

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

function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden',
// expose window controlls in Windows/Linux
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
})
win.loadFile('index.html')
}

app.whenReady().then(() => {
createWindow()
})

Create a custom title bar

<div id="titlebar">My cool titlebar</div>

the application needs to tell Electron which regions are draggable. We’ll do this by adding the CSS style app-region: drag to the custom title bar

body {
margin: 0;
}
.titlebar {
height: 30px;
background: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
app-region: drag;
}