Building a Native macOS Menu Bar Widget with SwiftUI and Glassmorphism

How I built SysMonitor, an open-source macOS resource monitor that tracks CPU, RAM, and Network with zero clutter.

title: "Building a Native macOS Menu Bar Widget with SwiftUI and Glassmorphism" description: "How I built SysMonitor, an open-source macOS resource monitor that tracks CPU, RAM, and Network with zero clutter." published: true tags: [macos, swiftui, swift, productivity] canonical_url: https://www.benihkode.web.id/blog/native-macos-system-monitor/ cover_image: series:

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:

{% github fanioz/sysmonitor %}

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!