PageLayout

Use the PageLayout to structure app pages with persistent header, sidebar, content, and details panel slots, including responsive breakpoint handling and resizable panels.

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,

Name	Type	Default	Description
minWidth?		200	The minimum width of the sidebar panel. Accepts a pixel value or a percentage string.
maxWidth?		'50%'	The maximum width of the sidebar panel. Accepts a pixel value or a percentage string.
defaultWidth?		'15%'	The initial width of the sidebar panel. Accepts a pixel value or a percentage string.
breakpoint?		960	Container width in pixels below which the sidebar panel collapses to a drawer.

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
minWidth?		320	The minimum width of the details panel. Accepts a pixel value or a percentage string.
maxWidth?		'50%'	The maximum width of the details panel. Accepts a pixel value or a percentage string.
defaultWidth?		'25%'	The initial width of the details panel. Accepts a pixel value or a percentage string.
width?			Controlled width of the details panel. Accepts a pixel value or a percentage string and is clamped to fit the current layout mode (within minWidth/maxWidth in split, or the available container width in overlay). Pair with onResize to follow drag-resizing; when omitted the panel manages its own width starting from defaultWidth.
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, , , , ,