Open in a new tab
View code
tsx
<SiteHeader
	brand={
		<a href="/" aria-label="Beacon home">
			<BeaconLogo />
		</a>
	}
	items={[
		{
			label: "Product",
			columns: [
				{
					title: "Monitor",
					links: [
						{ label: "Uptime", href: "/uptime", description: "Probes from 12 regions", icon: <GaugeIcon /> },
						…
					],
				},
				…
			],
			footer: { label: "Browse every feature", href: "/features" },
		},
		{ label: "Pricing", href: "/pricing" },
		{ label: "Docs", href: "/docs" },
	]}
	actions={[{ label: "Log in", href: "/login" }]}
	cta={{ label: "Start free", href: "/signup" }}
/>