# SiteHeader

> The landing site's top bar: brand, primary navigation with full-width mega panels, a primary action, and a full-screen phone sheet.

```ts
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

```tsx
<SiteHeader
	brand={<a href="/" aria-label="Keel home"><KeelLogo /></a>}
	items={[{ label: "Pricing", href: "/pricing" }, { label: "Product", columns }]}
	actions={[{ label: "Log in", href: "/login" }]}
	cta={{ label: "Start free", href: "/signup" }}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `brand` | `RemixNode` | The home link with the logo; give it an `aria-label` when the logo is an image. |
| `items?` | `Item[]` | Top-level navigation, in reading order. |
| `cta?` | `Action` | The primary call to action: in the bar at every width and full width in the sheet. |
| `actions?` | `Action[]` | Secondary actions such as "Log in": in the bar when wide, stacked in the sheet. |
| `tools?` | `RemixNode` | Extra bar controls (search, theme toggle, a repository link) before the actions. |
| `variant?` | `"bar" \| "floating"` | Chrome. Defaults to DEFAULT_VARIANT. |
| `collapseAt?` | `"lg" \| "xl"` | Where the inline navigation appears. Defaults to DEFAULT_COLLAPSE_AT. |
| `navLabel?` | `string` | Accessible name of both navigation landmarks. Defaults to "Main". |
| `menuLabel?` | `string` | Accessible name of the menu button. Defaults to "Open menu". |
| `closeLabel?` | `string` | Accessible name of the sheet's close button. Defaults to "Close menu". |
| `sheet?` | `RemixNode` | 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` | 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. |