Skip to content

Top main menu


Prepared and tested with Xcode 9 and Swift 4

In this tutorial we cover the following topics


General information

There is no advanced theory related to application's main menu and also editing it consists of simple drag and drop activities, so we jump right away into a first project. The one thing which counts is whether we will use .xib or .storyboard. We will show both approaches but for some details related to discussion which is better, please refer to First application: Xcode file formats section.


  1. Step 1: setting up a project in Xcode
    Launch Xcode and select File | New | Project... from main menu or from Welcome to Xcode screen select Create a new Xcode project.
    In project window select macOS | Application | Cocoa App template and then click the Next button.

    You will see the project options sheet. Name it macOS Menu Storyboard and make sure that only the Use storyboards check box is selected. Completed sheet should look like below

    Press Next button, and you will be prompted for a location for your project. When selected, press Create to save the project.
  2. Step 2: add label
    Single click Main.storyboard file in Project Navigator to open the application’s view in Xcode’s Interface Builder.

    From the Object Library drag a Label object onto the View Controller Scene (we can display Object Library selecting View | Utilities | Show Object Library

    Select the Size inspector by selecting right icon (or press command + option + 5) and/or the Attributes inspector by selecting right icon (or press command + option + 4) and set label's property like its width or title to whatever you want. In my case Title was set to an empty string as well as some constraints.
  3. Step 3: create an outlet for the label
    Show ViewController.swift file next to the user interface selecting either View | Assistant Editor | Show Assistant Editor or clicking right icon (an icon with double circles).

    Control drag a mouse pointer (drag it with Ctrl pressed) from the label to the ViewController class.

    Fill the popup with name labelSelectedMenuItem

    Xcode should add the following code to the ViewController class:
  4. Step 4: add an action for an existing menu item
    Click the File pull-down menu in the Interface Builder. Notice that the Assistant Editor should now display the AppDelegate.swift file.

    Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you want (Page Setup in my cases) to the AppDelegate class.

    Select Action as a Connection type, name it actionMenuItemSelected and select NSMenuItem as its Type

    Xcode should add the following code to the AppDelegate class:

    Notice that we can't control drag a mouse pointer from the menu item to the ViewController class -- there will be no option to create an action in this case.
  5. Step 5: connect an action with an outlet
    Now we have to connect somehow label outlet with an action which both are in separate files.

    Control drag a mouse pointer (drag it with Ctrl pressed) from menu item you have selected previously (Page Setup in my cases) to the First Responder icon


    From a pop-up select actionMenuItemSelected

    We can verify existence of this connection in the Connections inspector

    More information about first responder can be found in firstResponder or Responder object. We can think of this as the control/view that has the focus, because it will be the first to respond to events.

    Copy the actionMenuItemSelected from the AppDelegate class to the ViewController class.

    Add / modify actionMenuItemSelected method in the AppDelegate class with the following code

    Add / modify actionMenuItemSelected method in the ViewController class with the following code

  6. Step 6: make a test
    Run the application. From application's top main menu select menu item you have selected previously (Page Setup in my cases). You should see

    ViewController:actionMenuItemSelected

    printed as an output.
  7. Step 7: make a test
    Now we can connect a label outlet with an action.

    Add / modify actionMenuItemSelected method in the ViewController class with the following code

    and test the application

  8. Step 8: add a new menu item
    Single click Main.storyboard file in Project Navigator to open the application’s view in Xcode’s Interface Builder.

    Click the File pull-down menu in the Interface Builder.

    From the Object Library drag a Menu item object to the File and place it somewhere there


    Change its name (and/or any other properties you want) to Menu Item
  9. Step 9: bind a new menu item with an action
    Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have just add (Menu Item in my cases) to the First Responder icon

    From a pop-up select actionMenuItemSelected

    We can verify existence of this connection in the Connections inspector
  10. Step 10: make a test
    Test the application


  1. Step 1: setting up a project in Xcode
    Launch Xcode and select File | New | Project... from main menu or from Welcome to Xcode screen select Create a new Xcode project.
    In project window select macOS | Application | Cocoa App template and then click the Next button.

    You will see the project options sheet. Name it macOS Menu Xib and make sure that the Use storyboards check box is NOT selected. Completed sheet should look like below

    Press Next button, and you will be prompted for a location for your project. When selected, press Create to save the project.
  2. Step 2: add label
    Single click MainMenu.xib file in Project Navigator to open the application’s view in Xcode’s Interface Builder.

    Click the Window icon in the Document Outline to display the program’s user interface.

    From the Object Library drag a Label object onto the user interface window (we can display Object Library selecting View | Utilities | Show Object Library

    Select the Size inspector by selecting right icon (or press command + option + 5) and/or the Attributes inspector by selecting right icon (or press command + option + 4) and set label's property like its width or title to whatevery you want. In my case Title was set to an empty string as well as some constraints.
  3. Step 3: create an outlet for the label
    Show AppDelegate.swift file next to the user interface selecting either View | Assistant Editor | Show Assistant Editor or clicking right icon (an icon with double circles).

    Control drag a mouse pointer (drag it with Ctrl pressed) from the label to the AppDelegate class.

    Fill the popup with name labelSelectedMenuItem

    Xcode should add the following code to the AppDelegate class:
  4. Step 4: add an action for an existing menu item
    Click the File pull-down menu in the Interface Builder, next the menu item you want (Page Setup in my cases), and show the Connections inspector by selecting right icon (or press command + option + 6)

    As we can see, the Connections Inspector pane shows that the Page Setup command (or any other you selected) is connected to the runPageLayout action method in the First Responder.

    Click the close icon (the X) that appears in the top-left corner of the First Responder. This breaks the connection between the command and the method.

    Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have selected (Page Setup in my cases) to the AppDelegate class.


    Select Action as a Connection type, name it actionMenuItemSelected and select NSMenuItem as its Type

    Xcode should add the following code to the AppDelegate class:

  5. Step 5: make a test
    Now we can connect a label outlet with an action.

    Add / modify actionMenuItemSelected method in the AppDelegate class with the following code

    and test the application

  6. Step 6: add a new menu item
    Click the File pull-down menu in the Interface Builder.

    From the Object Library drag a Menu item object to the File and place it somewhere there


    Change its name (and/or any other properties you want) to Menu Item
  7. Step 7: bind a new menu item with an action
    Control drag a mouse pointer (drag it with Ctrl pressed) from the menu item you have just add (Menu Item in my cases) to the actionMenuItemSelected functon body. Make sure that the entire method is highlighted.

    We can verify existence of this connection in the Connections inspector
  8. Step 8: make a test
    Test the application