​

Overview

​

Key Features

• Draggable region support using WebkitAppRegion for Electron windows.
• Fully customizable layout via contentAlignment, padding, height, and inline styles.
• Composable components array, render any React elements (buttons, titles, icons, menus, etc.) inside the title bar.
• Visibility control for both the entire title bar and individual components.
• Double-click maximize/unmaximize behavior, mimicking native window behavior.

​

Usage Example

import { NativeDesktopTitleBar, ContentAlignment } from '@native-desktop/react';

import { MyWindowControls } from './MyWindowControls';
import { AppLogo } from './AppLogo';

export const MyAppTitleBar = () => (
  <NativeDesktopTitleBar
    height={36}
    inlinePadding={10}
    blockPadding={4}
    contentAlignment={ContentAlignment.SPACE_BETWEEN}
    components={[
      {
        id: 'left',
        component: <AppLogo />,
        isDragable: false,
      },
      {
        id: 'right',
        component: <MyWindowControls />,
        isDragable: false,
      },
    ]}
  />
);

​

Titlebar Component

​

Props

​

Component Types

​

Content Alignment Options

​

Notes

• The title bar is rendered as a fixed element positioned at the top of the viewport.
• The container has a default background color of red — intended for debugging. You should override it using the style prop.
• For best results, combine with Electron’s frameless window mode.

​

Developer Notes

​

Design Philosophy

• The component is style-agnostic, no CSS or theme dependency.
• Built for Electron environments only, where frameless windows require custom drag and control logic.
• Uses flexbox layout for predictable alignment and composability.

​

Drag Region Behavior

• Setting WebkitAppRegion: drag makes an area draggable by Native Desktop.
• MacOS and Windows handle drag regions slightly differently:
  • On macOS, buttons near the top-left may interfere with draggable areas; ensure custom buttons are within no-drag zones.
  • On Windows, draggable areas may overlap invisible hitboxes if padding or overlapping elements are misaligned.

​

Window Events

• Double-clicking toggles maximize/unmaximize via window.nativeDesktopWindow.
• Developers can disable this behavior by removing or replacing the event listener.

​

Performance & Rendering

• The component uses inline styles to avoid runtime stylesheet loading.
• Recommended for small, lightweight render trees (<10 child components).
• Since it’s fixed-positioned, it won’t reflow with other layout changes.

​

Accessibility

• The component itself doesn’t handle focus, keyboard navigation, or ARIA roles yet.
• If accessibility is a priority, wrap internal components (like buttons or menus) with proper roles and keyboard handlers.