# DocsPageHeader

> The opening of every docs page in one order: breadcrumb trail, the page's `<h1>`, its lead, an optional plan or role notice, then one quiet row with the last-updated date and the page actions.

```ts
import { DocsPageHeader } from "@sdxc/ui/docs";
```

Renders the header. Long names in the title or lead break inside the column, the trail
wraps whole steps, and under 30rem of header width the page's own crumb hides since the title names it.

## Examples

```tsx
<DocsPageHeader crumbsLabel="Breadcrumb" crumbs={[{ label: "Docs", href: "/docs" }, { label: "Alerts" }]} title="Alerts" description="Page the right person." updated={{ label: "Last updated", date: "2026-10-12", text: "Oct 12, 2026" }} actions={<PageActions … />} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `crumbs?` | `Crumb[]` | The trail from the docs root to this page; the last crumb is the page itself. |
| `crumbsLabel?` | `string` | Name of the breadcrumb landmark, such as "Breadcrumb". |
| `title` | `RemixNode` |  |
| `mono?` | `boolean` | Sets the title in the monospace face, for a title that is a name a reader types. |
| `description?` | `RemixNode` | The lead under the title. |
| `updated?` | `Updated` |  |
| `actions?` | `RemixNode` | Page actions for the meta row, such as `<PageActions>`. |
| `notice?` | `RemixNode` | A plan or role notice drawn under the lead. |

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