Scrollable Navigation Area
Scrollable Body Area
PageLayout
The PageLayout component provides a structured CSS Grid layout with four areas: Header, Navigation, Body, and Footer. It is used to create consistent page structures across your portal.
Layout Areas
The layout uses a CSS Grid with the following areas:
Header— Spans the full width at the top. Typically contains aMenuBarwith save/refresh buttons or page titles.Navigation— Left column below the header. Used for side navigation menus. Scrolls independently from the body.Body— Main content area. Scrolls independently and receives padding automatically.Footer— Spans the full width at the bottom. Typically contains copyright or status information.
Toggling Areas
Each area can be shown or hidden using the HeaderVisible, NavigationVisible, and FooterVisible parameters. When hidden, the area is removed from the grid layout entirely.
Styling
Each area supports both a Class and Style parameter (e.g. HeaderClass, HeaderStyle, BodyClass, BodyStyle, etc.) for custom styling. The top-level container also supports Class and Style.
Nested Layouts
A PageLayout can be nested inside the Body of another PageLayout to create sub-page layouts. The child layout automatically detects the parent and applies a child-layout CSS class with reduced header border styling.
Scroll Behavior
The body area scrolls independently from the header and footer, keeping them fixed in place. When navigating between pages, the body automatically scrolls to the top. The navigation area also scrolls independently.
Example
The following example shows a PageLayout with all four areas populated.
Configuration Options
Use the controls below to toggle each area's visibility and tune the resizable-navigation behavior — turn the splitter on/off, opt out of the localStorage persistence, and adjust the default / minimum / maximum drag widths. Drag the handle on the navigation/body boundary to resize, or double-click it to reset to the default width.
Scrollable Navigation Area
Scrollable Body Area
PageLayout Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Body | RenderFragment? | Content rendered in the main body area. This is the primary content region and scrolls independently from the header, footer, and navigation. Padding is applied automatically. | |
BodyClass | string? | CSS class applied to the body element. | |
BodyStyle | string? | Inline CSS style applied to the body element. | |
DefaultNavigationWidth | int | 280 | Navigation width in px used before the user resizes, and on double-click reset. Defaults to |
EnableNavigationResizing | bool | True | When Layout.PageLayout.NavigationVisible is Layout.PageLayout.DefaultNavigationWidth. |
Footer | RenderFragment? | Content rendered in the footer area at the bottom of the layout. The footer spans the full width and remains fixed while the body scrolls. Typically contains copyright notices or status information. | |
FooterClass | string? | CSS class applied to the footer element. | |
FooterStyle | string? | Inline CSS style applied to the footer element. | |
FooterVisible | bool | True | Controls whether the footer area is rendered. When set to |
Header | RenderFragment? | Content rendered in the header area at the top of the layout. Typically contains a | |
HeaderClass | string? | CSS class applied to the header element. Use this to apply custom styling such as background colors or borders. | |
HeaderStyle | string? | Inline CSS style applied to the header element. | |
HeaderVisible | bool | True | Controls whether the header area is rendered. When set to |
MaxNavigationWidth | int | 480 | Largest the navigation column will ever grow to, in px. Defaults to Layout.PageLayout.EnableNavigationResizing is on, this is the upper bound the user can drag the splitter to; when it's off, this is the element's |
MinNavigationWidth | int | 200 | Smallest the navigation can be dragged to, in px. Defaults to |
Navigation | RenderFragment? | Content rendered in the navigation area to the left of the body. Scrolls independently from the body. Typically contains a | |
NavigationClass | string? | CSS class applied to the navigation element. | |
NavigationResizeHandleLabel | string | Resize navigation | Accessible label for the resize handle (rendered with |
NavigationResizeStorageKey | string | ppp-page-layout-nav-width | localStorage key the chosen navigation width persists under. Defaults to Layout.PageLayout can be shown. Ignored when Layout.PageLayout.PersistNavigationWidth is |
NavigationStyle | string? | Inline CSS style applied to the navigation element. | |
NavigationVisible | bool | True | Controls whether the navigation area is rendered. When set to |
PersistNavigationWidth | bool | True | When Layout.PageLayout.NavigationResizeStorageKey and restored on subsequent loads. Set to Layout.PageLayout.DefaultNavigationWidth. Only meaningful when Layout.PageLayout.EnableNavigationResizing is |
ValidationSummaryVisible | bool | True | Controls whether the validation summary is displayed. Defaults to |
Name:
BodyType:
RenderFragment?
Description:
Content rendered in the main body area. This is the primary content region and scrolls independently from the header, footer, and navigation. Padding is applied automatically.
Name:
BodyClassType:
string?
Description:
CSS class applied to the body element.
Name:
BodyStyleType:
string?
Description:
Inline CSS style applied to the body element.
Name:
DefaultNavigationWidthType:
int
Default:
280
Description:
Navigation width in px used before the user resizes, and on double-click reset. Defaults to 280 .
Name:
EnableNavigationResizingType:
bool
Default:
True
Description:
When true , a drag handle on the navigation/body boundary lets the user resize the navigation column. Defaults to true . Has no effect when false or the navigation slot is empty, and the handle disables on mobile (where the navigation reverts to a viewport- relative width). Double-click the handle to reset to
Layout.PageLayout.NavigationVisible is Layout.PageLayout.DefaultNavigationWidth.Name:
FooterType:
RenderFragment?
Description:
Content rendered in the footer area at the bottom of the layout. The footer spans the full width and remains fixed while the body scrolls. Typically contains copyright notices or status information.
Name:
FooterClassType:
string?
Description:
CSS class applied to the footer element.
Name:
FooterStyleType:
string?
Description:
Inline CSS style applied to the footer element.
Name:
FooterVisibleType:
bool
Default:
True
Description:
Controls whether the footer area is rendered. When set to false , the footer is removed from the grid layout entirely. Defaults to true .
Name:
HeaderType:
RenderFragment?
Description:
Content rendered in the header area at the top of the layout. Typically contains a MenuBar with save/refresh buttons, breadcrumbs, or page titles. The header spans the full width and remains fixed while the body scrolls.
Name:
HeaderClassType:
string?
Description:
CSS class applied to the header element. Use this to apply custom styling such as background colors or borders.
Name:
HeaderStyleType:
string?
Description:
Inline CSS style applied to the header element.
Name:
HeaderVisibleType:
bool
Default:
True
Description:
Controls whether the header area is rendered. When set to false , the header is removed from the grid layout entirely and the body expands to fill the space. Defaults to true .
Name:
MaxNavigationWidthType:
int
Default:
480
Description:
Largest the navigation column will ever grow to, in px. Defaults to 480 . Unified cap: when max-width . Mobile (≤767.97px viewport) still falls back to a viewport-relative cap so a 480px default doesn't overrun a 360px phone.
Layout.PageLayout.EnableNavigationResizing is on, this is the upper bound the user can drag the splitter to; when it's off, this is the element's Name:
MinNavigationWidthType:
int
Default:
200
Description:
Smallest the navigation can be dragged to, in px. Defaults to 200 .
Name:
NavigationType:
RenderFragment?
Description:
Content rendered in the navigation area to the left of the body. Scrolls independently from the body. Typically contains a FluentNavMenu for side navigation. The navigation area sizes to its content width up to a maximum of 35% of the viewport width.
Name:
NavigationClassType:
string?
Description:
CSS class applied to the navigation element.
Name:
NavigationResizeHandleLabelType:
string
Default:
Resize navigation
Description:
Accessible label for the resize handle (rendered with role='separator' ). Defaults to 'Resize navigation' .
Name:
NavigationResizeStorageKeyType:
string
Default:
ppp-page-layout-nav-width
Description:
localStorage key the chosen navigation width persists under. Defaults to 'ppp-page-layout-nav-width' . Set a distinct key per layout if more than one resizable false .
Layout.PageLayout can be shown. Ignored when Layout.PageLayout.PersistNavigationWidth is Name:
NavigationStyleType:
string?
Description:
Inline CSS style applied to the navigation element.
Name:
NavigationVisibleType:
bool
Default:
True
Description:
Controls whether the navigation area is rendered. When set to false , the navigation is removed from the grid layout and the body expands to the full width. Defaults to true .
Name:
PersistNavigationWidthType:
bool
Default:
True
Description:
When true (the default), the navigation width the user drags to is persisted to localStorage under false to make every page load start fresh at true .
Layout.PageLayout.NavigationResizeStorageKey and restored on subsequent loads. Set to Layout.PageLayout.DefaultNavigationWidth. Only meaningful when Layout.PageLayout.EnableNavigationResizing is Name:
ValidationSummaryVisibleType:
bool
Default:
True
Description:
Controls whether the validation summary is displayed. Defaults to true .