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

    _PageLayoutRootProps

    extends<<>, >,
    NameTypeDefaultDescription
    children

    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.

    _SplitLayoutContentProps

    extends, <>
    NameTypeDefaultDescription
    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,
    NameTypeDefaultDescription
    collapsed?

    Whether the details panel is collapsed (controlled).

    defaultCollapsed?
    		false

    Default value for the collapsed state (uncontrolled).

    onCollapsedChange?
    (value: ) =>

    Fired when the collapsed state changes or should change.

    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, <>
    Still have questions?
    Find answers in the Dynatrace Community