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 guideChangelog3.14.0

Changes to PageLayout. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0

Updates

Layouts

• Fixed defaultWidth on the sidebar and details panels so that it is read once when the panel mounts, matching the React defaultValue convention. (APPDEV-19606)
• Fixed the aria-label and aria-labelledby props on the PageLayout panel slots, which were overridden by the built-in panel labels. (APPDEV-19606)
• Fixed the PageLayout sidebar turning into an open drawer over the content, and onBreakpointTransition not firing, when the breakpoint prop changed while the container stayed the same size. (APPDEV-19606)
• Fixed the label prop on PageLayout.Details, which did not name the resize separator. (APPDEV-19606)
• Fixed the issue that reset the main content's scroll position when a sidebar or details panel was added or removed. A panel replaced with a new key now starts from its own defaultCollapsed and defaultLayout rather than inheriting the previous panel's state. (APPDEV-19606)
• Fixed the resizable sidebar and details panels stopping 8px short of the width the layout allows when the visual refresh is enabled, where the resize handle takes no space between the columns. (APPDEV-19606)
• Fixed the layout height so it now accounts for dynamic browser UI on mobile viewports. (APPDEV-19606)
• Fixed the loss of the details panel's own scroll position when it was collapsed and expanded, or switched between the side-by-side and overlay layouts. (APPDEV-19606)

3.11.3

Updates

Layouts

• Fixed the horizontal scrollbar that appeared when PageLayout.Details was collapsed, or rendered as an overlay or drawer. The panel now takes up no space in those layouts. (APPDEV-19351)

3.11.0

Updates

Layouts

• Fixed PageLayout.Details ignoring maxWidth in the overlay layout, so dragging the panel now stops at the configured maxWidth. The maxWidth is unset by default. In the split layout, the details panel is kept to roughly half the width by the content panel. In the overlay layout, the panel is bounded by the container. (APPDEV-18910)

3.10.0

Updates

Layouts

• Opening or closing the PageLayout details or sidebar panel no longer scrolls the main content back to the top. (APPDEV-18829)

3.9.0

Updates

Layouts

• Added a controlled width prop to PageLayout.Details for full control of the details panel width. Pair it with the existing onResize callback to follow drag-resizing; the requested width is clamped to fit the active layout mode (within minWidth/maxWidth in split, or the available container width in overlay). When omitted, the panel manages its own width from defaultWidth. (APPDEV-18256)
• Fixed PageLayout.Sidebar and PageLayout.Details breakpoint crossings overwriting a controlled collapsed and firing onCollapsedChange for controlled panels. A crossing now fires the new onBreakpointTransition(belowBreakpoint) callback instead and never changes a controlled collapsed. An uncontrolled Sidebar still auto-collapses below the breakpoint and reopens above it; Details never auto-collapses and honors defaultCollapsed on every viewport. Migration: use onBreakpointTransition instead of onCollapsedChange to react to crossings; consumers relying on the component to auto-close a controlled panel on narrow viewports must subscribe to onBreakpointTransition and update collapsed themselves. (APPDEV-18164)

3.8.0

Updates

Layouts

• Changed the PageLayout.Content rendered element from div to main for better screen reader support.

3.7.0

Updates

Layouts

• Fixed PageLayout sidebar and details panels firing onCollapsedChange(false) and force-opening on mount when collapsed or defaultCollapsed was true and the container started above the breakpoint. The explicit collapsed state is now respected on the first measurement. (APPDEV-18054)