Building a Native macOS Menu Bar Widget with SwiftUI and Glassmorphism

I recently open-sourced SysMonitor, a native macOS menu bar app for tracking system resources like CPU, RAM, Disk I/O, and Network speeds.

I built it because I was tired of the two extremes in the macOS monitoring ecosystem: tools that give you just a tiny text readout in the menu bar with no details, or massive
dashboards that look like an airplane cockpit. I wanted a clean menu bar readout that drops down into a gorgeous, translucent widget only when I need it.

Here's how I put it together using 100% Swift and SwiftUI, and the workarounds I used to make it feel truly native.

Ditching NSPopover for Custom Glassmorphism

When you build a menu bar app, the standard Apple way to show a dropdown is using NSPopover. It handles the positioning and the little arrow pointing to the menu bar icon
automatically.

But NSPopover has strict visual constraints. It wraps your content in a border and doesn't easily let you achieve edge-to-edge transparency or custom glassmorphism.

Instead, I opted to build a custom, borderless NSWindow backed by an NSVisualEffectView:

// Create a borderless, transparent window
window.titlebarAppearsTransparent = true
window.titleVisibility = .hidden
window.isOpaque = false
window.backgroundColor = .clear

// Add the glassmorphism backdrop
let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.material = .hudWindow
visualEffect.state = .active
visualEffect.autoresizingMask = [.width, .height]

This gave me the exact visual style I wanted—a frosted glass panel floating over the desktop—but it meant I had to manually calculate exactly where the window should appear on the
screen.

The Math Behind Menu Bar Positioning

Because I wasn't using NSPopover, the widget window had no idea where the menu bar icon was. To make it feel like a dropdown, I had to grab the coordinates of the NSStatusItem
button and position the window relative to it.

Here's the logic inside the AppDelegate:

if let button = statusItem?.button, let _ = button.window?.screen {
    // 1. Get the button's bounds and convert to global screen coordinates
    let buttonFrameInWindow = button.convert(button.bounds, to: nil)
    let buttonFrameInScreen = button.window!.convertToScreen(buttonFrameInWindow)

    let windowWidth = window.frame.width
    let windowHeight = window.frame.height

    // 2. Center the window horizontally under the button
    let xPos = buttonFrameInScreen.midX - (windowWidth / 2)

    // 3. Place it just below the menu bar
    let yPos = buttonFrameInScreen.minY - windowHeight - 5

    // 4. Update the frame
    window.setFrame(NSRect(x: xPos, y: yPos, width: windowWidth, height: windowHeight), display: true)
}

This guarantees the window snaps perfectly underneath the icon, regardless of whether the user has a notch, an external monitor, or moves the icon around in their menu bar.

Smart Battery Management & Auto-Hide

One of the biggest issues with system monitors is that polling sysctl and calculating CPU ticks in the background can actually consume a lot of CPU, draining your MacBook
battery just to tell you your battery is draining.

To fix this, SysMonitor throttles itself. When the glass widget is visible, it polls every 2 seconds for a smooth UI. But when you click away, the window listens for
windowDidResignKey, auto-hides with a quick fade-out animation, and dials the polling back to every 5 seconds.

extension AppDelegate: NSWindowDelegate {
    // Hide the widget window automatically when the user clicks elsewhere
    func windowDidResignKey(_ notification: Notification) {
    if let window = widgetWindow, window.isVisible {
            hideWidgetWindow() // Fades out and drops polling rate to 5s
    }
    }
}

The Final Result

The end result is exactly what I wanted: a fast, native tool that tells me what I need to know and then gets out of my way.

You can check out the full source code (and grab the build) over on GitHub:

fanioz / sysmonitor

SysMonitor (sysmonitor)

A native macOS system resource widget with menu bar integration and a beautiful glassmorphic UI.

SysMonitor provides an elegant, unobtrusive way to track critical macOS system metrics. It combines a persistent menu bar item for glanceable CPU and RAM usage with a highly detailed, translucent widget window for per-core stats, disk I/O, network throughput, and memory breakdown.

Features

• Menu Bar Integration: Live, compact system stats right in your macOS menu bar.
• Glassmorphic Widget: A beautifully designed translucent window that pops down directly from the menu bar.
• Low Overhead: Self-regulates its polling interval when hidden to minimize CPU footprint.
• Smart Alerts: Native macOS notifications when metrics exceed safe thresholds.

Install

To install and build SysMonitor from source, you need Xcode installed on your Mac (macOS 13 or later).

git clone https://github.com/fanioz/sysmonitor.git
cd sysmonitor
xcodebuild -scheme sysmonitor -configuration Release build
open build/Release/sysmonitor.app

Usage

Once launched, SysMonitor will appear in your…

View on GitHub

Discussion Question: When you build background utilities for macOS or Windows, how do you balance the polling frequency with battery life constraints? Do you stick to fixed
intervals or dynamically throttle based on app visibility? Let me know below!