electron-menubar example apps: popover, icons, menus

The electron-menubar repository includes a selection of working examples in the examples folder. Each one is a small, runnable app you can use as a starting point.

Run an example

Clone the repository

git clone https://github.com/gitify-app/electron-menubar.git
cd electron-menubar

Install and build from the root folder

pnpm install
pnpm build

Install and start the example

cd into the example directory, then install its dependencies and run it:

cd examples/hello-world
pnpm install
pnpm start

Hello World

This is a simple Hello World menubar app that will just open a window that says “Hello World”.

main.js

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

const mb = menubar();

mb.on('ready', () => {
  console.log('Menubar app is ready.');
});

Arrow

A menubar app with an arrow on top, that gives the app a popover look. Thanks @leilarrossi for this example.

main.js

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

const mb = menubar({
  browserWindow: {
    transparent: true,
    width: 350,
    height: 550,
  },
});

mb.on('ready', () => {
  console.log('Menubar app is ready.');
});

Icon animation

A menubar app that animates the tray icon by swapping images on an interval, useful for showing a “syncing” state while data is being fetched.

main.js

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

const mb = menubar();

mb.on('ready', () => {
  setOkIcon();
  const trayAnimation = setInterval(frame, 1000);
  // simulate data fetching
  sleep(3000)
    .then(() => {
      clearInterval(trayAnimation);
      setOkIcon();
    })
    .catch(() => {});
});

function setOkIcon() {
  mb.tray.setImage('state-ok-20.png');
}

function frame() {
  setTimeout(() => mb.tray.setImage('state-sync-20.png'), 300);
  setTimeout(() => mb.tray.setImage('state-sync-20-60.png'), 600);
  setTimeout(() => mb.tray.setImage('state-sync-20-120.png'), 900);
}

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

This will create a menubar app with a native menu. Courtesy of @tslater. See Context Menus for the code and platform behavior.

The example sources import the library with require('../..') because they run from inside the repository. In your own app, use require('electron-menubar').

Get Started

Guides

API Reference

Platforms

electron-menubar example apps: popover, icons, menus

Run an example

Hello World

Arrow

Icon animation

Native menu