SiteHeader

The landing site's top bar.

DesktopPhone

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" }}
/>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { SiteHeader } from "@sdxc/ui/landing";

Renders a sticky header whose bar fills as the page scrolls under it. Groups open a full-width panel anchored to the bar; below collapseAt the links, groups and actions move into a full-screen sheet that keeps every row at least 44px tall.

Examples

Floating, with plain links

Open in a new tab

DesktopPhone

View code

tsx

<SiteHeader
	variant="floating"
	collapseAt="lg"
	brand={<a href="/" aria-label="Beacon home"><BeaconLogo /></a>}
	items={[
		{ label: "Features", href: "/features" },
		{ label: "Pricing", href: "/pricing", current: true },
		{ label: "Changelog", href: "/changelog" },
	]}
	actions={[{ label: "Log in", href: "/login" }]}
	cta={{ label: "Start free", href: "/signup" }}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`brand`	`RemixNode`	Yes	The home link with the logo; give it an `aria-label` when the logo is an image.
`items`	`Item[]`	No	Top-level navigation, in reading order.
`cta`	`Action`	No	The primary call to action: in the bar at every width and full width in the sheet.
`actions`	`Action[]`	No	Secondary actions such as "Log in": in the bar when wide, stacked in the sheet.
`tools`	`RemixNode`	No	Extra bar controls (search, theme toggle, a repository link) before the actions.
`variant`	`"bar" \| "floating"`	No	Chrome. Defaults to DEFAULT_VARIANT.
`collapseAt`	`"lg" \| "xl"`	No	Where the inline navigation appears. Defaults to DEFAULT_COLLAPSE_AT.
`navLabel`	`string`	No	Accessible name of both navigation landmarks. Defaults to "Main".
`menuLabel`	`string`	No	Accessible name of the menu button. Defaults to "Open menu".
`closeLabel`	`string`	No	Accessible name of the sheet's close button. Defaults to "Close menu".
`sheet`	`RemixNode`	No	Rendered at the end of the phone sheet. A one-page site places a client island here that closes the sheet when an in-page link is followed.
`prefetch`	`LinkPrefetch`	No	When every link and action the header draws starts loading its page. Defaults to `"none"`; `"intent"` warms a destination as the visitor hovers or focuses it.

Also accepts everything in TagProps<"header">.

Types

Name	Values	What it decides
`Variant`	`"bar" \| "floating"`	`bar` spans the viewport and gains its fill and hairline once the page scrolls; `floating` is a rounded bar held off the edges that gains a fill and a shadow.
`CollapseAt`	`"lg" \| "xl"`	Container width from which the inline navigation replaces the menu button: `lg` (48rem) for three or four short links, `xl` (64rem) for groups.