PageLayout

The PageLayout component provides the basic layout for your app with slots for a header, sidebar, main content, and a details panel.

Slot components (Header, Sidebar, Content, Details) can appear anywhere in the React subtree - inside <Outlet />, <Suspense>, or any wrapper component. They portal their children into stable DOM positions owned by PageLayout.

OverviewPropertiesUsageMigration guide

Prop Table did not receive data

PageLayout.Header

The PageLayout.Header is rendered at the very top of the layout. Use it to place app-level navigation, titles, or actions that apply to the whole page.

PageLayoutHeaderProps

extends, , , , ,

PageLayout.Sidebar

The PageLayout.Sidebar is the optional left panel. It collapses to a drawer when the container width drops below the breakpoint.

PageLayoutSidebarProps

extends,

PageLayout.Content

PageLayout.Content is the required main content area. It accepts a minWidth to prevent the content from shrinking below a certain value.

PageLayoutContentProps

extends, , , , ,

Name	Type	Default	Description
minWidth?			The minimum width of the content area. Accepts a pixel value or a percentage string.

PageLayout.Details

The PageLayout.Details is the optional right panel. It supports two layout modes (split and overlay) in addition to the responsive drawer mode.

PageLayoutDetailsProps

extends,

Name	Type	Default	Description
layout?			The current layout mode of the details panel (controlled).
defaultLayout?		'split'	Default layout mode of the details panel (uncontrolled).
onLayoutChange?	(value: ) =>		Fired when the layout mode changes or should change.
breakpoint?		600	Container width in pixels below which the details panel renders as an overlay instead of a split layout.

PageLayout.Details.ControlBar

PageLayout.Details.ControlBar provides the default close and layout-mode controls. Pass custom actions as children to extend it with panel-specific buttons.

PageLayoutDetailsControlBarProps

extends, , , , ,