WatchKit: Let’s Add a Menu

“The Retina display with Force Touch found on Apple Watch provides a new way to interact with content. Instead of just tapping items on the screen, pressing the screen with a small amount of force activates the context menu (if any) associated with the current interface controller.” – WatchKit Programming Guide

The Apple Watch menu is beautiful and simple to make. It can have a maximum of 4 items, so they all fit on the small screen.

Setup Your Watch App

Follow the instructions in my Hello WatchKit post. Make sure your Watch app is up and running!

Add Menu Items in Storyboard

In the Interface.storyboard, drag the Menu into the relevant Interface Controller – since at this point we only have one, drag it to that one!

WatchKit Interface Menu

As you’ve probably noticed, you can’t actually visually see the menu! Increase the number of Menu Items to 3. Change the Title and choose the default Image for each Item to get started:

Menu Item Default WatchKit

Again, you can’t actually visually see anything in the Storyboard in this version of XCode. To view your Menu, run the app, and Force Touch by holding your click to activate the Menu:

Currently, taping on a Menu Item just brings you back to the app. There’s one more step!

Menu Actions

Connecting a Menu Item to an actual Action is as easy as creating an IBAction via Control + Drag from the Menu Item in the Storyboard to the InterfaceController:


Notice that while you can make an Action for the Menu Item, you cannot make an IBOutlet!

Menu Item in Code

If your Menu Items are more dynamic, you can also add them in code:


A new Mute Icon is now added on my Watch App Menu!


You can view the sourcecode on Github here.

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.