Menu Dock

On macOS, the Dock is an interface element that displays open and frequently-used apps. While opened or pinned, each app has its own icon in the Dock.

[!NOTE] On macOS, the Dock is the entry point for certain cross-platform features like Recent Documents and Application Progress. Read those guides for more details.

Dock API

All functionality for the Dock is exposed via the Dock class exposed via app.dock property. There is a single Dock instance per Electron application, and this property only exists on macOS.

One of the main uses for your app's Dock icon is to expose additional app menus. The Dock menu is triggered by right-clicking or Ctrl-clicking the app icon. By default, the app's Dock menu will come with system-provided window management utilities, including the ability to show all windows, hide the app, and switch betweeen different open windows.

To set an app-defined custom Dock menu, pass any Menu instance into the dock.setMenu API.

[!TIP] For best practices to make your Dock menu feel more native, see Apple's Human Interface Guidelines page on Dock menus.

Attaching a context menu

Setting a Dock menu

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

// dock.setMenu only works after the 'ready' event is fired
app.whenReady().then(() => {
  const dockMenu = Menu.buildFromTemplate([
    {
      label: 'New Window',
      click: () => { const win = new BrowserWindow() }
    }
    // add more menu options to the array
  ])

  // Dock is undefined on platforms outside of macOS
  app.dock?.setMenu(dockMenu)
})

[!NOTE] Unlike with regular context menus, Dock context menus don't need to be manually instrumented using the menu.popup API. Instead, the Dock object handles click events for you.

[!TIP] To learn more about crafting menus in Electron, see the Menus guide.

Runnable Fiddle demo

Below is a runnable example of how you can use the Dock menu to create and close windows in your Electron app. fiddle docs/latest/fiddles/menus/dock-menu