Linch

Overview

TitleBar is a custom window title bar component, providing:

Logo and app name display
Window control buttons (minimize, maximize, close)
Double-click to maximize
Drag to move window
Theme and language switchers

Import

import { TitleBar } from '@linch-tech/desktop-core';

Props

interface TitleBarProps {
  /**
   * Custom className
   */
  className?: string;
}

Basic Usage

TitleBar is usually rendered automatically by the Shell component, no manual use required.

For standalone use:

import { TitleBar } from '@linch-tech/desktop-core';

function MyLayout() {
  return (
    <div>
      <TitleBar />
      <main>Content</main>
    </div>
  );
}

Layout Structure

┌─────────────────────────────────────────────────┐
│  [Logo] [App Name]   [Center]   [Lang][Theme][×]│
│  └─ left slot ─┘     └─center─┘  └─ right slot ─┘
└─────────────────────────────────────────────────┘

Configuration Options

Configure via layout.titleBar:

layout: {
  titleBar: {
    height: 40,                 // Height (pixels)
    showWindowControls: true,   // Show window control buttons
    draggable: true,            // Allow drag to move window
  },
},

Slots

Inject custom content via slots.titleBar:

slots: {
  titleBar: {
    left: <SearchInput />,      // Replace logo and app name
    center: <BreadcrumbNav />,  // Center area
    right: <UserMenu />,        // Replace theme/language switchers
  },
},

Custom Logo

import { MyLogo } from './components/Logo';

brand: {
  name: 'My App',
  logo: MyLogo,
},

Logo component receives className prop:

function MyLogo({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      {/* ... */}
    </svg>
  );
}

Window Controls

TitleBar includes the following window control features:

Feature	Trigger
Minimize	Click minimize button
Maximize/Restore	Click maximize button or double-click title bar
Close	Click close button
Drag to move	Drag the title bar area

Hiding Window Controls

layout: {
  titleBar: {
    showWindowControls: false,
  },
},

Disabling Dragging

layout: {
  titleBar: {
    draggable: false,
  },
},

Overriding TitleBar Component

Fully customize TitleBar:

import type { TitleBarProps } from '@linch-tech/desktop-core';
import { WindowControls } from '@linch-tech/desktop-core';

function CustomTitleBar({ className }: TitleBarProps) {
  return (
    <header className={className} data-tauri-drag-region>
      <div>My Custom Title Bar</div>
      <WindowControls />
    </header>
  );
}

export const config = {
  components: {
    TitleBar: CustomTitleBar,
  },
};

Window Focus State

TitleBar automatically adjusts opacity based on window focus state:

Window focused: Normal display
Window unfocused: Slightly transparent

Notes

The data-tauri-drag-region attribute makes an element a draggable region. Ensure clickable elements (buttons, etc.) have the pointer-events-auto class.

If decorations: true in tauri.conf.json, TitleBar will display alongside the system title bar. It's recommended to set decorations: false for custom title bars.

TitleBar

On this page