A responsive sticky site header with brand, mobile menu toggle, navigation and action slots laid out in a CSS grid.
import SiteHeader from "@/components/ui/site-header";
export default function SiteHeaderDemo() {
return (
<div
style={{
background: "var(--lk-background-color)",
minHeight: "100%",
width: "100%",
}}
>
<SiteHeader
position="static"
fullWidth
className="w-full"
style={{ width: "100%" }}
brand={
<a href="#" aria-label="Acme">
<span
style={{
fontWeight: 700,
fontSize: "1.05rem",
color: "var(--lk-font-color-base)",
}}
>
Acme
</span>
</a>
}
mobileAction={
<button
type="button"
aria-label="Open navigation"
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
width: 40,
height: 40,
border: "none",
background: "transparent",
color: "var(--lk-font-color-base)",
cursor: "pointer",
}}
>
☰
</button>
}
navigation={
<nav aria-label="Main" style={{ whiteSpace: "nowrap" }}>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#docs">Docs</a>
</nav>
}
actions={
<>
<a
href="#login"
style={{
fontSize: "0.875rem",
fontWeight: 600,
color: "var(--lk-font-color-secondary)",
textDecoration: "none",
whiteSpace: "nowrap",
}}
>
Log in
</a>
<button
type="button"
style={{
display: "inline-flex",
alignItems: "center",
height: 36,
paddingInline: "0.9rem",
borderRadius: "var(--lk-radius-control)",
border: "none",
background: "var(--lk-color-primary)",
color: "#fff",
fontSize: "0.875rem",
fontWeight: 600,
cursor: "pointer",
whiteSpace: "nowrap",
}}
>
Sign up
</button>
</>
}
/>
</div>
);
}