Quickstart: create your first Electron menubar app

electron-menubar gives you a tray icon and a popup window with a single menubar() call. This guide installs the package and runs a minimal app with Electron.

electron-menubar requires electron version 35.0.0 or later as a peer dependency.

Installation

pnpm add electron-menubar

Usage

Create the project files

Starting with your own new project, run these commands:

pnpm add electron-menubar
touch myApp.js
touch index.html

Write your app

Fill index.html with some HTML, and myApp.js like this:

myApp.js

const { menubar } = require('electron-menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('app is ready');
  // your app code here
});

The package ships both CommonJS and ESM entry points with TypeScript declarations, so you can also use import { menubar } from 'electron-menubar'.

Run the app

Then use electron to run the app:

electron myApp.js

By default, menubar loads index.html from the app source directory (process.cwd()) and uses IconTemplate.png from the same directory as the tray icon. See Options to change these.

Get Started

Guides

API Reference

Platforms

Quickstart: create your first Electron menubar app

Installation

Usage

Next steps

Options

Examples