# PageHeader

> The top of an app screen in one order: where it sits (a breadcrumb, or a parent link on a narrow pane), the `<h1>` with its status and one-line description, the actions (secondary, primary, then overflow), and an optional row of tabs.

```ts
import { PageHeader } from "@sdxc/ui/app";
```

Renders the header. From 40rem the actions end the title's row, the description under both;
narrower, they sit beside the title when they fit and after the description otherwise. A
sticky header spans the shell's gutter (`--ui-app-gutter`) so content never shows beside it.

## Examples

```tsx
<PageHeader crumbsLabel="Breadcrumb" crumbs={[{ label: "Monitors", href: "/monitors" }, { label: "api.acme.dev" }]} title="api.acme.dev" status={<Badge color="success">Up</Badge>} actions={<Button variant="outline">Pause</Button>} primaryAction={<Button>Edit monitor</Button>} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` |  |
| `crumbs?` | `Crumb[]` | The trail from the app's root to this screen, shown from 40rem of header width. |
| `crumbsLabel?` | `string` | The breadcrumb landmark's name, such as "Breadcrumb". |
| `parent?` | `Parent` | The parent link shown under 40rem; defaults to the last linked crumb before this screen. |
| `description?` | `RemixNode` | One line under the title. |
| `status?` | `RemixNode` | A badge after the title, such as the record's status. |
| `primaryAction?` | `RemixNode` | The one primary action, drawn after the secondary actions. |
| `actions?` | `RemixNode` | Secondary actions, drawn first. |
| `overflow?` | `RemixNode` | An overflow menu's trigger and menu, drawn last, so a destructive item in it comes last. |
| `tabs?` | `Tab[]` |  |
| `tabsLabel?` | `string` | The tabs landmark's name, such as "Monitor views". |
| `sticky?` | `boolean` | Sticks the header at `--ui-app-sticky-top` and compacts it once stuck: the trail and the description fold away and the title shrinks. Reduced motion keeps it full size. |

Also accepts everything in `Omit<TagProps<"header">, "title" | "children">`.