diff --git a/docs/images/macos-dock-menu.png b/docs/images/macos-dock-menu.png new file mode 100644 index 000000000000..5d4b2356fc50 Binary files /dev/null and b/docs/images/macos-dock-menu.png differ diff --git a/docs/tutorial/macos-dock.md b/docs/tutorial/macos-dock.md index 25b5f3f73323..3116d413ff74 100644 --- a/docs/tutorial/macos-dock.md +++ b/docs/tutorial/macos-dock.md @@ -1,10 +1,11 @@ # macOS Dock +## Overview + Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only -API exists to create a custom dock menu, but -Electron also uses the app's dock icon to implement cross-platform features -like [recent documents][recent-documents] and -[application progress][progress-bar]. +API exists to create a custom dock menu, but Electron also uses the app dock +icon as the entry point for cross-platform features like +[recent documents][recent-documents] and [application progress][progress-bar]. The custom dock is commonly used to add shortcuts to tasks the user wouldn't want to open the whole app window for. @@ -13,8 +14,15 @@ __Dock menu of Terminal.app:__ ![Dock Menu][dock-menu-image] -To set your custom dock menu, you can use the `app.dock.setMenu` API, which is -only available on macOS: +To set your custom dock menu, you need to use the +[`app.dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API, +which is only available on macOS. + +## Example + +Starting with a working application from the + [Quick Start Guide](quick-start.md), update the `main.js` file with the + following lines: ```javascript const { app, Menu } = require('electron') @@ -33,9 +41,16 @@ const dockMenu = Menu.buildFromTemplate([ { label: 'New Command...' } ]) -app.dock.setMenu(dockMenu) +app.whenReady().then(() => { + app.dock.setMenu(dockMenu) +}) ``` +After launching the Electron application, right click the application icon. +You should see the custom menu you just defined: + +![macOS dock menu](../images/macos-dock-menu.png) + [dock-menu-image]: https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png [recent-documents]: ./recent-documents.md [progress-bar]: ./progress-bar.md