project quicknotes

Step 2: Menu Bar

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Set up the menu bar icon and popover.

Where We Are

You have a basic macOS project. Now let's make it a menu bar app.

Convert to Menu Bar App

terminal
Convert the app to a menu bar (status bar) application:
- Use NSStatusBar to add an icon to the menu bar
- Use an SF Symbol like "note.text" or "square.and.pencil" for the icon
- When clicked, show a popover panel
- Remove the app from the Dock (set LSUIElement to YES in Info.plist)
- Remove the default window

Test It

  1. Run the app
  2. Look in your menu bar (top right of screen)
  3. You should see a small icon
  4. Click it — a popover should appear
  5. The app should NOT appear in the Dock

If the icon doesn't appear, check the console in Xcode for errors.

Size the Popover

terminal
Set the popover to a reasonable size:
- About 300 points wide
- About 400 points tall
- It should appear directly below the menu bar icon

Add Close Behavior

terminal
The popover should close when:
- The user clicks outside of it
- The user presses Escape

Checkpoint

By now you should have:

  • Menu bar icon visible
  • Popover appears on click
  • App is not in the Dock
  • Popover closes on click-outside and Escape

What You Learned

  • NSStatusBar and status items
  • Popovers vs windows
  • LSUIElement for Dock visibility
  • macOS-specific app lifecycle

Exercises

  1. Run the "Convert to Menu Bar App" prompt, then verify the icon appears in the menu bar and the app is gone from the Dock.
  2. Apply the "Size the Popover" prompt and check the popover opens directly below the icon at roughly 300×400 points.
  3. Add the close behavior, then test both triggers: click outside the popover and press Escape, confirming each dismisses it.