TopBar

The TopBar is the status strip at the top of the HUD. It has three slots, left, center and right, and carries the panel chrome: corner brackets and a light trace that circles its border.

import { TopBar } from 'jarvis-react-ui';

Positions

position decides how the bar is placed:

Value Behavior
fixed Default. Pinned to the viewport, 10px from the top, left and right edges, above other content.
sticky Full width in the document flow; sticks 10px below the top of its scroll container.
static Full width in the document flow, like a normal block, e.g. inside a page header or a card.

The bar is always 40px high. With fixed, leave room at the top of your layout: the slot grid of WindowManager reserves the top 60px for it.

Static

import { BrandMark, TopBar } from 'jarvis-react-ui';

export default function Static() {
    return (
        <TopBar
            position="static"
            left={<span className="text-[11px] text-text">09:04:17</span>}
            center={
                <span className="text-[9px] tracking-[8px] text-text-muted uppercase">
                    JARVIS / <b className="text-accent-bright font-medium">MK XLII</b>
                </span>
            }
            right={<BrandMark />}
        />
    );
}

Slots

Each slot takes any React node. Use the left slot for time or status text, the center for a title and the right for a brand mark or actions.

import { Bell, Settings } from 'lucide-react';
import { BrandMark, IconButton, StatusBadge, TopBar } from 'jarvis-react-ui';

export default function Actions() {
    return (
        <TopBar
            position="static"
            left={<BrandMark />}
            center={<StatusBadge label="LINK · SECURE" state="online" pulse />}
            right={
                <span className="flex items-center gap-1">
                    <IconButton icon={Bell} label="Notifications" size="sm" />
                    <IconButton icon={Settings} label="Settings" size="sm" />
                </span>
            }
        />
    );
}

Sticky

Scroll the log: the bar stays at the top of the scroll container.

import { TopBar } from 'jarvis-react-ui';

const LINES = Array.from(
    { length: 12 },
    (_, i) => `LOG ${String(i + 1).padStart(2, '0')} · telemetry received`,
);

export default function Sticky() {
    return (
        <div className="h-[220px] w-full overflow-y-auto border border-border px-3 pb-3">
            <TopBar
                position="sticky"
                left={<span className="text-[11px] text-text">EVENT LOG</span>}
                right={<span className="text-[9px] text-text-muted">SCROLL ↓</span>}
            />
            <ul className="mt-4 flex flex-col gap-2 text-[11px] text-text-secondary">
                {LINES.map((line) => (
                    <li key={line}>{line}</li>
                ))}
            </ul>
        </div>
    );
}

Fixed

The default. In this demo the bar is pinned to the demo frame, because the frame creates a containing block; in an app it is pinned to the viewport.

import { BrandMark, TopBar } from 'jarvis-react-ui';

export default function Fixed() {
    return (
        <TopBar
            left={<span className="text-[11px] text-text">09:04:17</span>}
            center={<span className="text-[9px] tracking-[8px] text-text-muted">JARVIS</span>}
            right={<BrandMark />}
        />
    );
}

Accessibility

  • The TopBar renders plain <div> elements without a landmark role. If it acts as the page header, wrap it in a <header> element.
  • Keep interactive content in the slots keyboard accessible, e.g. Button, or IconButton with a label.

API

Prop Type Default Description
center ReactNode Content of the centered slot, e.g. a title.
className string Additional class names for the root element.
left ReactNode Content of the left slot, e.g. a clock or status text.
position 'fixed' | 'sticky' | 'static' 'fixed' fixed pins the bar 10px from the top of the viewport (HUD default), sticky keeps it in the document flow and sticks it to the top while scrolling, static renders it inline.
right ReactNode Content of the right slot, e.g. a brand mark or actions.