Topbar

A top navigation bar with left, center and right slots.

Basic

Renders a full-width bar with a bottom border. Use title to display a brand name in the left slot.

My App

<Topbar title="My App" />

With slots

Use left, center and right to place any content into the three layout zones.

My App

<Topbar
left={<span className="text-sm font-semibold">My App</span>}
center={<Input placeholder="Search…" className="max-w-xs" />}
right={<Button variant="primary" size="sm">New project</Button>}
/>

Position

Control how the bar is positioned in the document with the position prop.

{/* Scrolls with content (default) */}
<Topbar title="My App" position="static" />

{/* Stays at the top while scrolling */}
<Topbar title="My App" position="sticky" />

{/* Removed from document flow, spans the viewport */}
<Topbar title="My App" position="fixed" />

Without border

Set bordered={false} to remove the bottom border — useful when the bar sits above a coloured hero or custom header.

<Topbar title="My App" bordered={false} />

Props

Prop	Type	Default	Description
`title`	`string`	—	Brand name rendered in the left zone alongside `left`
`left`	`ReactNode`	—	Content anchored to the left
`center`	`ReactNode`	—	Content centered in the available space
`right`	`ReactNode`	—	Content anchored to the right
`position`	`'static' \| 'sticky' \| 'fixed'`	`'static'`	CSS positioning strategy for the bar
`bordered`	`boolean`	`true`	Shows a bottom border separating the bar from page content
`className`	`string`	—	Additional Tailwind classes on the root element