Add System Tray to Tauri App | Show/Hide/Quit Menu Tutorial

Add System Tray to Tauri App | Show/Hide/Quit Menu Tutorial

Adding a system tray icon to your Tauri desktop app allows it to run seamlessly in the background with quick access controls. This tutorial demonstrates how to enable the tray feature, create a tray menu with Show, Hide, and Quit options, and handle menu events to control your app window using React, TypeScript, and Rust.

Code

// In Cargo.toml, enable the tray-icon feature for Tauri
[dependencies]
tauri = { version = "2", features = ["tray-icon"] }

// In src-tauri/src/main.rs
use tauri::{CustomMenuItem, SystemTray, SystemTrayMenu, SystemTrayEvent, Manager};

fn main() {
  // Create tray menu items
  let show = CustomMenuItem::new("show".to_string(), "Show");
  let hide = CustomMenuItem::new("hide".to_string(), "Hide");
  let quit = CustomMenuItem::new("quit".to_string(), "Quit");

  // Build the tray menu
  let tray_menu = SystemTrayMenu::new()
    .add_item(show)
    .add_item(hide)
    .add_native_item(tauri::SystemTrayMenuItem::Separator)
    .add_item(quit);

  // Create the system tray with the menu
  let system_tray = SystemTray::new().with_menu(tray_menu);

  tauri::Builder::default()
    .setup(|app| {
      let window = app.get_window("main").unwrap();

      // Listen for tray menu events
      app.tray_handle().on_event(move |event| {
        match event {
          SystemTrayEvent::MenuItemClick { id, .. } => {
            match id.as_str() {
              "show" => window.show().unwrap(),
              "hide" => window.hide().unwrap(),
              "quit" => std::process::exit(0),
              _ => {}
            }
          }
          _ => {}
        }
      });
      Ok(())
    })
    .system_tray(system_tray)
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Key Points

• Enable the tray-icon feature in Cargo.toml to activate system tray support in Tauri.
• Create tray menu items using CustomMenuItem and assemble them into a SystemTrayMenu.
• Use SystemTray::new().with_menu() to build and attach the tray icon with its menu.
• Handle SystemTrayEvent::MenuItemClick events to show, hide, or quit the app window.
• System tray apps can run in the background and provide quick access controls without occupying taskbar space.