MenuBar

MenuBar renders the top 24 px of the desktop (matching the macOS Big Sur menu bar). It is system chrome: application-specific actions belong inside the window, not here. Hidden when theme.chrome.menuBar is "none".

The menu bar tracking the focused window Open in new tab ↗

Import

import { MenuBar, MENU_BAR_HEIGHT } from "@react-ui-os/desktop";

Props

Prop	Type	Default	Description
`brand`	`string`	none	The optional far-left label, hidden when omitted. Click it to open a system menu (About, Settings), like the macOS Apple menu.

Composition

┌──────────────────────────────────────────────────────────────┐
│ brand · focused-app-name                          Thu Mar 5 13:42 │
└──────────────────────────────────────────────────────────────┘

Left cluster: the brand (a button that opens an Apple-style system menu), followed by the focused app’s name (or the focused system window’s resolved name) in bold, the macOS emphasis for the active app. Both are the macOS app-menu pattern: a theme can drop the brand with theme.chrome.menuBarBrand: false, and the focused-app name only shows in the right-clock (macOS) layout, so a GNOME-style top-left holds just the workspace switcher.
Right cluster: the workspace switcher (when more than one space exists), any registered status items, and a live system clock formatted via Intl.DateTimeFormat. Clicking the clock opens the Notification Center. Hover highlights on every control are rounded and theme-adaptive. SSR-safe: the clock renders nothing on first paint, then updates on mount.
Clock placement: theme.chrome.menuBarClock moves the clock. "right" (default) keeps it in the status cluster, the macOS placement; "center" adopts the GNOME arrangement, the clock centered with the status indicators on the right and the workspace switcher moved to the left.
Quick Settings: when theme.chrome.quickSettings is set, the status cluster becomes a single button (network / sound / battery glyphs) that opens the Quick Settings popover, the way GNOME groups its indicators.

What goes here

✓ Brand and its Apple-style system menu. ✓ Focused application name (bold). ✓ System-level status: clock, online indicator, sync state, workspace switcher.

✗ App-specific actions, menus, or buttons. Those belong inside the window.

Configuration via theme

`theme.chrome.menuBar`	Behavior
`"top"`	Renders the bar at the top of the viewport (default).
`"none"`	Returns `null`. App identity then needs to surface inside the windows themselves.

Related chrome tokens: menuBarClock ("right" / "center"), menuBarBrand (true / false, whether the bar carries the brand button), and quickSettings (opens the Quick Settings popover from the status cluster).

Exports

Export	Description
`MENU_BAR_HEIGHT`	Pixel height of the bar (24). Useful when laying out custom surfaces that must clear it.