Component reference

WindowTitleBar

The title bar of a window whose native title bar is hidden but whose window controls remain (a desktop shell).

Preview

Desktop shell

The page's own top bar once a desktop shell hides the native title bar. The shell reports the traffic-light space through the --mygo-titlebar-height and left/right inset variables, and the title bar makes room for it; the whole title bar is a drag area whose buttons, links and inputs stay clickable. The scenario sets these variables and draws the traffic lights by hand; in a browser with no shell they fall back to a 32px ordinary top bar.

packages/meowtail/stories/window-title-bar.stories.tsxline 118tsx

render() {
  return (
    <SchemePair width={420}>
      {(scheme) => (
        <Window
          room={rooms.hidden}
          title={`Meowland · ${scheme === "light" ? "Light" : "Dark"}`}
        />
      )}
    </SchemePair>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { WindowTitleBar } from "meowtail";

<WindowTitleBar
  title="No shell variables · Fallback"
  trailing={
    <IconButton size="small" label="Search">
      <Icon name="search" />
    </IconButton>
  }
/>

Examples

The other stories that show this component.

Shell room and narrow windows

TitleBarHidden is 32px high with a 69px left inset; TitleBarHiddenInset is 66px and 79px. In full screen the shell reports 0px and the title bar collapses. In a narrow window the title is clipped and the actions on both sides stay; without a shell (in a browser) it falls back to a 32px ordinary top bar.

packages/meowtail/stories/window-title-bar.stories.tsxline 148tsx

render() {
  return (
    <div style={{ display: "grid", gap: "16px", maxWidth: "720px" }}>
      <Window room={rooms.hidden} title="TitleBarHidden · 32px / 69px" />
      <Window room={rooms.hiddenInset} title="TitleBarHiddenInset · 66px / 79px" />
      <Window room={rooms.fullScreen} title="Full screen · 0px" />
      <Window
        room={rooms.hidden}
        width={320}
        title="A very long window title used to check truncation in a narrow window"
      />
      <div
        style={{
          overflow: "hidden",
          borderRadius: "10px",
          border: "1px solid var(--ui-line-edge)",
        }}
      >
        <WindowTitleBar
          title="No shell variables · Fallback"
          trailing={
            <IconButton size="small" label="Search">
              <Icon name="search" />
            </IconButton>
          }
        />
      </div>
    </div>
  );
}

API reference

The shell reports the room it needs as --mygo-titlebar-height, --mygo-titlebar-inset-left (traffic lights) and --mygo-titlebar-inset-right; the bar keeps clear of that room and marks itself as the window's drag area with --app-region: drag, while buttons, links and fields inside it opt out. Double-click zooming is the shell's job. The component does not detect the platform: the host renders it only where the shell exists, and in a browser tab the variables fall back to a plain bar.

Props

Prop	Type	Default
`title`Window or page name, centred between the slots. Part of the drag area.	`Child`	–
`leading`After the native window controls, for example navigation. Interactive children stay clickable.	`Child`	–
`trailing`Window-level actions at the far edge. Interactive children stay clickable.	`Child`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootleadingtitletrailing

Registry

The component is registered as window-title-bar in the meowtail component registry.