Tools: Building a Menubar App with Tauri v2 — What Nobody Tells You

Tools: Building a Menubar App with Tauri v2 — What Nobody Tells You

Source: Dev.to

All tests run on an 8-year-old MacBook Air. All results from shipping 7 Mac apps as a solo developer. No sponsored opinion. Menubar apps look simple from the outside. A tray icon, a popover, done. The actual implementation has enough edge cases that I wish someone had written this before I started. The basic setup Tauri v2 has first-class tray icon support. The fundamentals: rust use tauri::{ tray::{TrayIconBuilder, TrayIconEvent}, Manager, }; TrayIconBuilder::new() .icon(app.default_window_icon().unwrap().clone()) .on_tray_icon_event(|tray, event| { if let TrayIconEvent::Click { .. } = event { // toggle window } }) .build(app)?; Hide from Dock and App Switcher A menubar app shouldn't appear in the Dock or Cmd+Tab switcher. Set this in Info.plist: xml LSUIElement Or in tauri.conf.json: json { "bundle": { "macOS": { "infoPlist": { "LSUIElement": true } } } } Without this, users will be confused why a menubar app appears in the Dock. This is the first thing to set. Window positioning The window should appear below the tray icon, not in the center of the screen. Tauri doesn't handle this automatically. Get the tray icon position and calculate: rust fn position_window_near_tray(window: &WebviewWindow, tray_rect: &tauri::PhysicalRect) { let window_size = window.outer_size().unwrap(); let x = tray_rect.position.x + (tray_rect.size.width as i32 / 2) - (window_size.width as i32 / 2); let y = tray_rect.position.y + tray_rect.size.height as i32; window.set_position(tauri::PhysicalPosition::new(x, y)).ok(); } Account for screen edges. A window that opens half off-screen on a secondary monitor is a real edge case worth handling. Show/hide vs create/destroy Two approaches: keep the window hidden and show/hide it, or create and destroy it on each toggle. Show/hide is simpler and faster. The window stays in memory. State persists between opens. Create/destroy resets state on each open. Good for apps where you want a fresh start each time. Slower on older hardware. I use show/hide for all my menubar apps. The state persistence is a feature, not a bug. rust if window.is_visible().unwrap_or(false) { window.hide().ok(); } else { window.show().ok(); window.set_focus().ok(); } Auto-hide when focus is lost Click elsewhere, window disappears. Users expect this from menubar apps. rust window.on_window_event(|event| { if let WindowEvent::Focused(false) = event { window.hide().ok(); } }); One edge case: if your window opens a dialog or file picker, the focus loss will close the main window before the dialog appears. Add a flag to suppress auto-hide when a child window is open. The verdict Menubar apps in Tauri v2 are well-supported. The gaps are window positioning, auto-hide behavior, and the LSUIElement setting. All solvable — just not documented in one place until now. If this was useful, a ❤️ helps more than you'd think — thanks! Hiyoko PDF Vault → https://hiyokoko.gumroad.com/l/HiyokoPDFVault X → @hiyoyok Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or