Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including custom-electron-titlebar with all npm packages installed. Try it out:

var customElectronTitlebar = require("custom-electron-titlebar")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

custom-electron-titlebar v3.1.0

Custom Electron Titlebar is a library for electron that allows you to configure a fully customizable title bar.

Custom Electron Titlebar

This project is a typescript library for electron that allows you to configure a fully customizable title bar.


Preview 1

Preview 2

Preview 3


npm i custom-electron-titlebar


npm install custom-electron-titlebar@latest

or use the base project cet-quickstart


In your renderer file or in a script tag of your html add:

const customTitlebar = require('custom-electron-titlebar');

new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#444')

if you are using typescript

import { Titlebar, Color } from 'custom-electron-titlebar'

new Titlebar({
    backgroundColor: Color.fromHex('#ECECEC')

The parameter backgroundColor: Color is require, this should be Color type. (View Update Background for more details).


The interface [TitleBarOptions] is managed, which has the following configurable options for the title bar. Some parameters are optional.

backgroundColor (required)ColorThe background color of the titlebar.#444444
iconstringThe icon shown on the left side of the title bar.null
iconsThemeThemeStyle of the
shadowbooleanThe shadow of the titlebar.false
dragbooleanDefine whether or not you can drag the window by holding the click on the title bar.true
minimizablebooleanEnables or disables the option to minimize the window by clicking on the corresponding button in the title bar.true
maximizablebooleanEnables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar.true
closeablebooleanEnables or disables the option of the close window by clicking on the corresponding button in the title bar.true
orderstringSet the order of the elements on the title bar. (inverted, first-buttons)null
titleHorizontalAlignmentstringSet horizontal alignment of the window title. (left, center, right)center
menuElectron.MenuThe menu to show in the title bar.Menu.getApplicationMenu()
menuPositionstringThe position of menubar on titlebar.left
enableMnemonicsbooleanEnable the mnemonics on menubar and menu items.true
itemBackgroundColorColorThe background color when the mouse is over the item.rgba(0, 0, 0, .14)
overflowstringThe overflow of the container (auto, visible, hidden)auto


Update Background

When this method is executed, as well as when the title bar is created, it is checked whether the color is light or dark, so that the color of the icons adapts to the background of the title bar.

titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));

To assign colors you can use the following options: Color.fromHex(), new Color(new RGBA(r, g, b, a)), new Color(new HSLA(h, s, l, a)), new Color(new HSVA(h, s, v, a)) or Color.BLUE, Color.RED, etc.

Update Title

This method updated the title of the title bar, If you change the content of the title tag, you should call this method for update the title.

document.title = 'My new title';

// Or you can do as follows and avoid writing document.title
titlebar.updateTitle('New Title');

if this method is called and the title parameter is added, the title of the document is changed to that of the parameter.

Update Icon

With this method you can update the icon. This method receives the url of the image (it is advisable to use transparent image formats)


Update Menu

This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.

const menu = new Menu();
menu.append(new MenuItem({
    label: 'Item 1',
    submenu: [
            label: 'Subitem 1',
            click: () => console.log('Click on subitem 1')
            type: 'separator'

menu.append(new MenuItem({
    label: 'Item 2',
    submenu: [
            label: 'Subitem checkbox',
            type: 'checkbox',
            checked: true
            type: 'separator'
            label: 'Subitem with submenu',
            submenu: [
                    label: 'Submenu &item 1',
                    accelerator: 'Ctrl+T'


Update Menu Position

You can change the position of the menu bar. left and bottom are allowed.


Set Horizontal Alignment

setHorizontalAlignment method was contributed by @MairwunNx :punch:

left, center and right are allowed



This method removes the title bar completely and all recorded events.



Many thanks to all the people who support this project through issues and pull request. If you want to contribute with this project, all the issues and pull request are welcome.


This project is under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free