Header
A slim application top bar with left, center and right control slots. Fits breadcrumbs, selects, button groups and avatars.
Playground
<Header
leftControls={
<>
<AppIcon />
<span className="text-sm font-medium">Builder</span>
</>
}
rightControls={
<>
<Button variant="secondary" size="sm">
<Share2 />
Share
</Button>
<Button size="sm">Publish</Button>
</>
}
/>Preview
Pass content to the slots you need: leftControls hugs the leading edge, rightControls is pushed to the trailing edge with ml-auto, and each slot renders only when its prop is provided.
<Header
leftControls={
<>
<AppIcon />
<span className="text-sm font-medium">Builder</span>
</>
}
rightControls={
<>
<Button variant="ghost" size="icon-sm">
<Settings />
</Button>
<HeaderSeparator />
<Button variant="secondary" size="sm">
<Share2 />
Share
</Button>
<Button size="sm">Publish</Button>
<Avatar className="size-8">
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</>
}
/>Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/header.jsonUsage
import { Header, HeaderSeparator } from "@/components/ui/header"<Header
leftControls={<Logo />}
centerControls={<PageSwitcher />}
rightControls={
<>
<Button variant="secondary" size="sm">Share</Button>
<HeaderSeparator />
<UserMenu />
</>
}
/>Center controls
centerControls takes the flexible middle of the bar (flex-1) and centers its content – ideal for an editor's document switcher between tool and action clusters.
<Header
leftControls={<AppIcon />}
centerControls={
<Button variant="ghost" size="sm" className="gap-1.5">
<span className="font-medium">My page</span>
<span className="text-muted-foreground">- pages/my-page-c3c8</span>
<ChevronDown />
</Button>
}
rightControls={
<>
<Button variant="ghost" size="icon-sm">
<Play />
</Button>
<Button size="sm">Publish</Button>
</>
}
/>Separator
HeaderSeparator draws a 1px vertical rule to split control clusters within a slot – a labelled role="separator" rather than a plain border.
<Header
leftControls={
<>
<span className="text-sm font-medium">Tasks</span>
<HeaderSeparator />
<span className="text-sm text-muted-foreground">4 / 6 complete</span>
</>
}
rightControls={<Button size="sm">Mark complete</Button>}
/>API reference
Header renders a semantic header element and accepts className plus all standard header props; any children render after the three slots.
Header
| Prop | Type | Default | Description |
|---|---|---|---|
| leftControls | React.ReactNode | – | Leading cluster (data-slot="header-left") – logos, breadcrumbs, app switchers. Rendered only when provided. |
| centerControls | React.ReactNode | – | Flexible centered middle cluster (data-slot="header-center"). Rendered only when provided. |
| rightControls | React.ReactNode | – | Trailing cluster pushed to the edge with ml-auto (data-slot="header-right") – actions, avatars. Rendered only when provided. |
| Component | Description |
|---|---|
| HeaderSeparator | Vertical 1px divider between control clusters (data-slot="header-separator") with role="separator" and aria-orientation="vertical". |
Accessibility & styling hooks
The root is a native header landmark, and HeaderSeparator announces itself as a vertical separator. The root and each slot expose data-slot attributes (header, header-left, header-center, header-right, header-separator) for CSS targeting.