A custom titlebar in Tauri that keeps the Mac traffic lights

Native Mac apps draw content right up to the top of the window, with the close, minimise and zoom buttons floating over a sidebar. Tauri's default window has a separate grey titlebar, which is one of the first things that makes an app look like a web page.

The config

// src-tauri/tauri.conf.json
{
  "app": {
    "windows": [{
      "title": "My App",
      "titleBarStyle": "Overlay",
      "hiddenTitle": true,
      "width": 1100, "height": 720
    }]
  }
}

The titlebar becomes transparent and your web content fills the whole window. The traffic lights stay where macOS draws them.

Make it draggable

<header class="titlebar" data-tauri-drag-region></header>

.titlebar { height: 52px; position: fixed; inset: 0 0 auto 0; }

Without a drag region the window cannot be moved. In Tauri 2, also allow it in your capability file, for example core:window:allow-start-dragging. Buttons inside the drag region should not carry the attribute, so they stay clickable.

Leave room for the buttons

The traffic lights sit near the top left. Keep that corner free: pad the sidebar's top so its first item starts below them, and keep toolbar buttons to the right of them. A search field or button under the traffic lights is the most common mistake with this setup.

Match the rest

A native titlebar with web-sized controls below it still looks like a web page. Shrink the controls, drop hand cursors and use the system font; see a native macOS look in Tauri and Electron and a macOS sidebar in CSS.

macOS Native Dark UI has the overlay titlebar as a recipe, with the layout kept clear of the traffic lights, written from the Tauri 2 app behind free-mac.online.