Skip to main content

PageLayout

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

    Experimental

    PageLayout is still experimental. Be aware that the API is subject to change. See Strato versioning for details.

    OverviewPropertiesUsageMigration guide

    The sidebar is for page-level concerns: navigation structures, entity lists, or filter panels that exist independently of any specific selection in the content area. If its content only makes sense in the context of something selected in PageLayout.Content, use the details panel instead.

    • Collapse controls are built in and appear on hover.
    • Keep actions in the sidebar (search fields, add buttons) scoped to the sidebar's own content, not to the content area.

    Content​

    PageLayout.Content is the central focus of the page.

    Details​

    The details panel is for content directly tied to a selection or entity shown in PageLayout.Content. If the panel would be useful without anything selected in the content area, it belongs in the sidebar instead.

    • Do not use the details panel for settings or features unrelated to a selection in the content area.
    • Prefer a default overlay layout when the content area must remain full-width, for example a canvas, preview, or grid that does not reflow nicely at narrower widths.
    • Prefer a default split layout when the content naturally adapts to a narrower container, for example a form, list, or text editor.

    Accessibility concerns​

    The overlay layout mode has some accessibility constraints. The content area is fully interactive and all elements within it are focusable. This means the Details overlay can obstruct a focused element below it.

    Be aware of the accessibility implications and build your UI accordingly.

    Control bar​

    PageLayout.Details.ControlBar renders a close button and, above the responsive breakpoint, a toggle between split and overlay layout. Place it at the top of the details panel content to give users a discoverable way to close or reposition the panel.

    Compose it in a <Flex> to add title, subtitle and other elements you need for your Details header.

    • Pass custom actions as children to extend the bar with panel-specific buttons. They appear before the default controls, separated by a divider.
    • The layout-toggle button is hidden in drawer mode.

    Split vs. overlay​

    • split (default): the details panel displaces the content area. Both share the available width. Use this when the content reflows cleanly at narrower widths.
    • overlay: the details panel floats over the content without altering its width. Use this to maximize the content area while the details panel is open.

    Control the active mode with layout and onLayoutChange, or set an initial value with defaultLayout.

    Responsive behavior​

    Both panels collapse to a Drawer below their respective breakpoint. See Layout hierarchy for how each panel's breakpoint is measured.

    Resizing​

    Panels are resizable by default within their configured minWidth and maxWidth constraints. Set resizable={false} to lock a panel to its configured width and hide the drag handle. Use this when the panel width is fixed by its content rather than user preference.

    Content state​

    Panel content is never unmounted. Component state, scroll positions, and form input values persist across collapse and expand cycles automatically.

    To reset state when a panel closes, do so explicitly in onCollapsedChange. To re-initialize state on open, conditionally render the slot's children based on the collapsed state.

    Still have questions?
    Find answers in the Dynatrace Community