Layout is the frame of a page: LayoutHeader, LayoutContent and LayoutFooter stack in a column, and with hasSider a LayoutSider sits beside the content. Each part renders its landmark by default (header, aside, main, footer); change it with as.

There are two ways to scroll:

• The page scrolls (position="static", the default). The layout grows with its content and never clips, so position="sticky" headers and siders stick to the window. Use it for documents and docs sites.
• The panes scroll (position="absolute"). The layout fills its positioned parent, and the content, each sider and any nested layout scroll on their own. Use it for app shells.

#Demos

#Basic

A header, content and footer in a column; hasSider puts a sider beside them. bordered draws a rule on the side that faces the content.

#App shell

position="absolute" fills the nearest positioned parent. Give that parent a height (here a 360px box; for a whole app, the window). The header and footer keep their height and the panes between them scroll.

#Scrollbar

A sider, and the content of an absolute layout, scroll in a ScrollArea. Pass it props with scrollAreaProps, here trigger: "none" to always show the scrollbars, and pad the content through its contentClassName so the padding scrolls too. nativeScrollbar uses the browser’s scrollbar instead.

#Collapse

showTrigger adds a toggle on the sider’s edge. collapseMode="width" narrows the content to collapsedWidth; the default transform keeps the content’s width and slides it under the edge.

#Right sider, controlled

A sider after the content with placement="right" borders and toggles on its left. showTrigger="bar" draws a bar beside it. Control it with collapsed and onUpdateCollapsed; collapsedWidth={0} with showCollapsedContent={false} hides it completely.

#Docs site

The page scrolls (the frame stands in for the window). The header is sticky; both siders are sticky 48px below it, as tall as the window minus that offset, and scroll on their own when their links don’t fit. hideBelow hides a sider when the window is narrower than a Grid breakpoint: the page list below m, the outline below l.

#Layout Props

#LayoutHeader, LayoutFooter Props

#LayoutContent Props

#LayoutSider Props

Every part forwards native attributes and ref to its root element.

#Notes

• Header, footer and siders never use position: absolute. In an app shell they are flex items and the panes scroll; in a page they can be sticky.
• Layout itself does not scroll: the content or a sider scrolls, and scrollRef / onScroll reach it. A nested Layout inside an absolute one still scrolls natively when its own children overflow.
• The side of a sider is set on LayoutSider with placement, so one layout can have a sider on each side.
• Themes decide the colors. To act when a sider finishes opening or closing, listen for transitionend on the sider.