> ## Documentation Index
> Fetch the complete documentation index at: https://electron-menubar.gitify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# electron-menubar example apps: popover, icons, menus

> Working electron-menubar example apps: Hello World, a popover with an arrow, an animated tray icon, and a native tray context menu, with run steps.

The `electron-menubar` repository includes a selection of working examples in the [`examples`](https://github.com/gitify-app/electron-menubar/tree/main/examples) folder. Each one is a small, runnable app you can use as a starting point.

## Run an example

**1. Clone the repository**

```bash theme={null}
git clone https://github.com/gitify-app/electron-menubar.git
cd electron-menubar
```

**2. Install and build from the root folder**

```bash theme={null}
pnpm install
pnpm build
```

**3. Install and start the example**

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

```bash theme={null}
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".

```javascript main.js theme={null}
const { menubar } = require('electron-menubar');

const mb = menubar();

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

![Hello World example](https://raw.githubusercontent.com/gitify-app/electron-menubar/main/examples/hello-world/screenshot.png)

## Arrow

A menubar app with an arrow on top, that gives the app a popover look. Thanks [@leilarrossi](https://github.com/maxogden/menubar/issues/78) for this example.

```javascript main.js theme={null}
const { menubar } = require('electron-menubar');

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

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

![Arrow example](https://raw.githubusercontent.com/gitify-app/electron-menubar/main/examples/arrow/screenshot.png)

## 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.

```javascript main.js expandable theme={null}
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);
  });
}
```

## Native menu

This will create a menubar app with a native menu. Courtesy of [@tslater](https://github.com/maxogden/menubar/issues/178). See [Context Menus](https://electron-menubar.gitify.io/guides/context-menus.md) for the code and platform behavior.

![Native menu example](https://raw.githubusercontent.com/gitify-app/electron-menubar/main/examples/native-menu/screenshot.png)

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.