Designing macOS Menu Bar Extras

Metadata

• Author: template images
• Full Title: Designing macOS Menu Bar Extras
• URL: https://bjango.com/articles/designingmenubarextras/

Highlights

The height of the Mac menu bar has grown a little over time, starting at 19pt on System 1, growing to 21pt for the Mac OS X beta, then 22pt in Yosemite, and finally 24pt in Big Sur, which is where it stands today.

14-inch and 16-inch MacBook Pros with a camera housing at the top of the screen have an even taller menu bar, measuring 37pt. When display scaling is used, the menu bar changes height to ensure it always fits the camera housing. On a 14-inch MacBook Pro the menu bar can be 27pt, 29pt, 34pt, 37pt, or 43pt tall, depending on the display scaling setting.

Despite the variation in possible menu bar heights, the working area for menu bar extras is fixed at 22pt, and items can not be taller. A good size for a circular item to feel the same weight as system menu bar items is 16×16pt. Assets can be a different size, provided they’re not taller than 22pt. There should typically not be any padding, unless it is needed to assist with vertical centering.

Menu bar extras can be full colour, or monochrome template images. A template image is a standard image, but macOS will ignore the colour, and only use the alpha channel information. Template images are preferred, because they’re automatically tinted to match the system icons in light mode and dark mode, without the need for different assets.

Apple typically uses 35% opacity to indicate disabled elements.