PageLayout
A page inside a layout: a sticky header, the content, and an optional aside that sticks from `lg`. It owns the page padding, sets no height and no overflow, and it is server-safe.
import { PageLayout, PageHeader } from "@glob-ui/page-layout"Anatomy
Each slot declares its scroll behaviour. Switch on Anatomy to see them, and Fill with content to see which region scrolls.
import { AppShellLayout } from "@glob-ui/app-shell-layout"import { PageLayout, PageHeader } from "@glob-ui/page-layout"const ITEMS = Array.from({ length: 16 }, (_, i) => `Item ${i + 1}`)// PageLayout lives inside a shell's main region. The page passes content only: no wrapper, padding or height.export default function PageDefault() { return ( <AppShellLayout header={<strong>Acme</strong>}> <PageLayout header={<PageHeader title="Invoices" description="Open and paid, this month" actions={<span className="rounded-md border px-3 py-1.5 text-sm">New invoice</span>} />} aside={ <div className="rounded-xl border p-4 text-sm"> <p className="font-medium">Filters</p> <p className="text-fd-muted-foreground">Status, client, date range.</p> </div> } > <ul className="flex flex-col gap-2"> {ITEMS.map((item) => ( <li key={item} className="rounded-lg border p-3"> {item} </li> ))} </ul> </PageLayout> </AppShellLayout> )}Slots
The layout is a grid of slots. A prop fills each slot, and each slot is fixed or scroll.
| Slot | Element | Scroll | Notes |
|---|---|---|---|
header | <div> | fixed | Sticks to the top of the nearest scroll region while the content scrolls. |
content | <div> | scroll | Moves with the scroll region that contains the page. |
aside | <aside> | fixed | Sticks from lg. Below lg it stacks under the content. |
- fixed: the slot never scrolls. It stays in place, or sticks.
- scroll: the one region that scrolls for this part of the screen.
Server-safe
PageLayout and PageHeader have no client code, so they render in a Server Component. Put them inside a layout, for example the main of an AppShellLayout.
The page padding belongs here
The shells (AppShellLayout, StackedLayout) give their main region no padding: they own structure and scroll only. PageLayout owns the page padding, so a page never wraps its content in a div with spacing, a height or overflow.
API
PageLayoutProps
Prop
Type
PageHeaderProps
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| PageHeader | The title is an h1. Breadcrumbs sit above it: give them a nav with its own label. |
| aside | A complementary landmark. Give it a label when the page has more than one. |
ARIA. PageHeader renders the single h1 of the page. Actions wrap onto a new line at 375 px.