Skip to main content

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 guideChangelog

    When to use​

    • As the default layout for your app.
    • When your page needs a persistent header, main content area, and details panel.
    • When your page needs responsive layout handling, resizable panels, or a details panel and drawer.

    When not to use​

    • For simple single-view pages that don't need navigation panels or a details panel.

    Example of page layout showing the page header at the top, the sidebar at the left, the main content area in the center, and the details panel on the right. Example of page layout showing the page header at the top, the sidebar at the left, the main content area in the center, and the details panel on the right.

    Content (required)​

    PageLayout.Content is the only required slot. Every page needs one, and it never collapses to a drawer, so anything essential to the page belongs here.

    • Use Content for the primary view for which the page exists, for example a table, a dashboard, or a form.
    • Use the optional Sidebar for navigation, entity lists, or filters that exist independently of any selection in Content. Content should be meaningful and understandable without the sidebar.
    • Use Details for information tied to a specific selection or entity in Content. If it only makes sense after the user selects something, it goes there, not in Content.

    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.

    • Collapse controls are built in and appear on hover.
    • Keep any actions—for example, a search field or an "Add" button—scoped to the sidebar's own content, not to the content area.

    Details (optional)​

    The details panel is for content directly tied to a selection or entity shown in PageLayout.Content.

    • Use it to show additional information related to the content area without forcing users to go to a new page.
    • Don't use it to show content unrelated to the content area.
    • Along with additional information, Details may be used for settings that configure an item in the content area.

    Width​

    The default width for the details panel is 25% of the full screen width for screen sizes below 1920px. Above that size, 30% of screen size is recommended. However, the panel can be customized to other widths as well and is also resizable. The minimum width of the panel is 320px. Its maximum default width is 100% of the screen size.

    Split view​

    In split view, the details panel and the content area are shown side by side, just below the app header.

    Use details panel exclusively as a split view when:

    • The Content and details panel should show all their information simultaneously.
    • The details panel must not be closed.

    Example of a split view where the full content area is visible to the left of the details panel. Example of a split view where the full content area is visible to the left of the details panel.

    Overlay view​

    In overlay view, the details panel lays over the content and doesn't reduce the width of the content area.

    Use details panel exclusively as an overlay view when:

    • Re-arranging or compressing the content area to make room for the details panel would diminish the experience.
    • Content and Details must not be visible simultaneously.

    Note that the overlay can only be closed with a button, not by clicking outside the panel.

    Example of an overlay view showing how the details panel lays on top of the content area, covering some of the content area. Example of an overlay view showing how the details panel lays on top of the content area, covering some of the content area.

    Keep overlay view accessible Use the overlay view with caution since it can obstruct focused elements in the content area. Be sure that the keyboard navigation follows a Z pattern. :::

    Control bar​

    PageLayout.Details.ControlBar renders a close button and a toggle above the responsive breakpoint. The toggle lets users switch between the 'split' and 'overlay' layouts. Place it at the top of the details panel content so users can easily see how to close or reposition the panel. Omit the control bar if panel repositioning isn't needed for your use case.

    Maximize or restore button​

    A pre-built maximize button is available, which can be added to the panel control bar. The maximize button exposes configuration options, such as setting a custom maximum width other than 100%.

    Use the maximize feature when:

    • The information in the details panel is important and requires a bigger format.
    • Content and Details must not be visible simultaneously.

    Place the maximize button in the control bar as a pre-built, configurable component. Maximize and restore actions are rendered to the left of the default controls, separated by a divider.

    Responsive behavior​

    Below its breakpoint a panel renders as a Drawer. An uncontrolled sidebar auto-collapses at the breakpoint. A details panel keeps its open/closed state. See Responsive behavior in the Overview tab for the full contract, and Layout hierarchy in the Overview tab for how the breakpoint is measured for each panel.

    Still have questions?
    Find answers in the Dynatrace Community