# DocsLayout

> The shell a docs page composes into: the sidebar pinned on the left from the header to the viewport's foot, the article and its footer beside it, and the page's own headings in a rail.

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

Renders the three columns and their narrow-screen fallbacks. Load
`@sdxc/ui/docs/table-of-contents` and `@sdxc/ui/dialog-dismiss` in the browser entry. Headings
with an `id` in the article get a `scroll-margin-top` that clears the sticky chrome, and
`--ui-docs-scroll-margin` carries the same offset for anything else jumped to.

## Examples

```tsx
<DocsLayout sidebar={<DocsNav tree={tree} activePath={path} />} toc={anchors} tocLabel="On this page" menuLabel="Menu" drawerLabel="Documentation" closeLabel="Close menu">
	<DocsPageHeader title="Install" crumbs={crumbs} />
</DocsLayout>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `sidebar` | `RemixNode` | The tree to read through, usually a `DocsNav`; drawn docked and again in the drawer. |
| `children` | `RemixNode` | The article: a page header, the prose, then its pager and next steps. |
| `toc?` | `TableOfContents.Item[]` | The page's own headings; fewer than `tocMinItems` draw neither rail nor bar list. |
| `tocLabel` | `string` | "On this page", for the rail's heading and the bar. |
| `tocMinItems?` | `number` |  |
| `menuLabel` | `string` | The bar button that opens the drawer below the dock width ("Menu"). |
| `drawerLabel` | `string` | The drawer's heading and accessible name ("Documentation"). |
| `closeLabel` | `string` | The drawer's close button's accessible name ("Close menu"). |
| `railFooter?` | `RemixNode` | Drawn under the headings in the rail, such as feedback or an edit link. |
| `footer?` | `RemixNode` | Closes the page across the article and rail columns, never under the sidebar, so the docked sidebar runs to the viewport's foot; usually a `DocsFooter`. |
| `header?` | `RemixNode` | A site header drawn above the shell, kept on screen as the page scrolls. |
| `stickyTop?` | `string` | The height of everything kept on screen above the shell (the `header` slot, or a site header the app draws around the layout), so sticky columns and jumped-to headings sit below it. |
| `dock?` | `Dock` |  |
| `measure?` | `string` | The article column's widest extent, which code, images, tables and charts may fill. |
| `proseMeasure?` | `string` | The widest line of running text: paragraphs, lists, headings, quotes and callouts stop here while wider blocks keep growing to `measure`. Readable prose sits at 60–75ch. |
| `maxWidth?` | `string` | The whole shell's widest extent. @default "88rem" |
| `main?` | `boolean` | Whether the article column is the page's `<main>` landmark; pass `false` when the app's own layout already draws one around the shell. |
| `drawerId?` | `string` | Shared by the drawer and the button that opens it. @default "docs-drawer" |