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

PageLayoutProps

extends, , , , ,

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, applied in both split and overlay layouts. Accepts a pixel value or a percentage string.
maxWidth?			The maximum width of the details panel, applied in both split and overlay layouts. Accepts a pixel value or a percentage string. The container edge is always the hard ceiling. Unset by default: in split the panel is bounded by the content keeping ~half the width, and in overlay only by the container. In split mode, the effective maximum is also constrained by PageLayout.Content's minWidth (default '50%'); to allow a wider details panel in split mode, lower PageLayout.Content's minWidth accordingly.
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 (minWidth/maxWidth, always bounded by the available container width). 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 a drawer. Unlike the sidebar, the details panel never collapses itself here: the drawer stays open until it is dismissed.

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, , , , ,