Create a simple menubar app for Mac OS X

This is a quick and easy tutorial to developing your own menubar app for Mac OS X. I’ll assume you have basic familiarity with Cocoa, Objective-C, and Xcode, but even if you don’t it should be easy enough to follow along.

Create a new Xcode project and let’s get started.


The 4 steps to a menubar app:

  1. Mark your app as a UIElement in your Info.plist file.
  2. Create an NSStatusItem programmatically in Xcode.
  3. Use Interface Builder to design an NSMenu.
  4. Hook everything up using connections in Interface Builder.

Mark your app as a UIElement

The secret to creating a menubar app is the Application is agent (UIElement) property. Setting this property to YES ensures your app does not create its own Dock icon or main [File, Edit, View] menubar.

Open your appName-Info.plist file. Right-click the blank area and select Add Row from the context menu.

In the new row, enter Application is agent (UIElement) as the Key and YES as the boolean value.

Add the Application is agent (UIElement) property your Info.plist file


Create an NSStatusItem programmatically

In your AppDelegate.h file, create properties for your menubar item and its menu. Also declare the IBActions functions users can access from the menu.

//AppDelegate.h file
@interface AppDelegate : NSObject <NSApplicationDelegate>

@property (nonatomic, retain) NSStatusItem *menubarStatusItem; //The menubar app icon in your menubar
@property (nonatomic, retain) IBOutlet NSMenu *menubarMenu; //Click on your menubar icon and this menu appears.

- (IBAction)playAlertSound:(id)sender; //User will play an alert sound from the app's menubar menu.

@end

Then, in your AppDelegate.m file, programmatically create your menubar icon in -awakeFromNib.

Don’t forget to define the IBAction functions you’ll run from the menubar menu.

//AppDelegate.m file
@implementation AppDelegate

@synthesize menubarStatusItem = _menubarStatusItem;
@synthesize menubarMenu = _menubarMenu;

- (void) awakeFromNib
{
    //Create the NSStatusBar and set its length
    self.statusItem = [[NSStatusBar systemStatusBar] statusItemWithLength:NSSquareStatusItemLength];

    //Unicode symbols can be used as simple, easy menubar app icons
    [self.menubarStatusItem setTitle:[NSString stringWithFormat:@"♫"]];
    [self.statusItem setHighlightMode:YES];

    //Assign a menu to open when the menubar icon is clicked.
    [self.statusItem setMenu:statusMenu];
}

- (IBAction) playAlertSound:(id) sender
{
    NSBeep(); //Plays the default OS X alert sound.
}

Use Interface Builder to design a menu for your menubar app

Open your MainMenu.xib file in Interface Builder. Go ahead and delete the default NSWindow, you won’t be needing it for this app.

Drag an NSMenu object from the sidebar into the Interface Builder area.

Drag a new NSMenu object from the Interface Builder sidebar

This menu should contain a few NSMenuItems by default; rename one Play OS X Alert and another Quit. Delete any extra menu items.

You can drag a Separator menu item into the menu as well, to visually separate the two menu item commands.

Edit your NSMenu


Hook everything up with Interface Builder Connections

You’ve now created your menubar status item in code, and the menu for that menubar icon using Interface Builder. The only thing left to do is hook everything together.

Give your menubar app a menu:

  • In Interface Builder, select your App Delegate in the left sidebar. Drag its menubarMenu property connection to the NSMenu you created.

Drag your App Delegate's menubarMenu property connection to the NSMenu.

Now connect the menubar items to the correct functions:

  • Drag the Play OS X Alert menu item’s selector connection to the App Delegate‘s -playAlertSound action.
  • Drag the Quit menu item’s selector connection to the File's Owner‘s -terminate command.

You’re done!

That’s all there is to it! Run your Xcode Project and you’ll see your app’s icon up in the menubar.

Clicking your app’s menubar icon will open your menu, and clicking each item in the menu will activate the respective function.

The completed simple menubar app project

The great thing about menubar apps is that people want them to be simple utilities that do one thing well. If you were to add a few useful functions, an app like this would be right at home on the Mac App Store.

{ 0 comments… add one }

Leave a Comment