Designing macOS menu bar extras
Apple’s HIG is great, but it doesn‘t contain much information related to designing menu bar extras. This article aims to provide additional details and context needed to create icons for macOS menu bar extras.
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.
Those sizes are in points, where 1 point is equal to 1 non-Retina pixel and 2 Retina pixels. The menu bar screenshots below are from 512 Pixels and the Graphical User Interface Gallery. It’s interesting to see how the menu bar has grown over the past few decades.
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.
On a 16-inch MacBook Pro, it’s almost the same, but the middle display scaling menu bar height is 33pt, rather than 34pt. I’m not sure why.
Menu bar extra size #
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.
Colour and template images #
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.
Given colour is ignored, template image artwork should be created as a solid colour icon. If needed, it’s possible to use different levels of opacity to provide shading. This is often used to indicate state, like volume or Wi-Fi strength. Apple typically uses 35% opacity to indicate disabled elements.
File format #
Menu bar extra image assets can be a single SVG, a single PDF, or a pair of PNGs (1× and 2× scales for non-Retina and Retina displays). They can also be drawn with code, if you require something dynamic, like an analogue clock or a calendar icon that shows the day of the month.
Reduce transparency #
The reduce transparency option under accessibility in system preferences changes the menu bar to be dark grey or light grey, rather than a colour that’s similar to the desktop background. The reduce transparency preference can be a good way to get cleaner screenshots of the menu bar, and it’s worth being aware that some people will see your menu bar extra with this option enabled.
Published 25 April 2022.