Site Header

Navigation

About

A responsive sticky site header with brand, mobile menu toggle, navigation and action slots laid out in a CSS grid.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Site Header to your project and fits it to your theme.

Code

How Site Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}