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 a MenuBar with 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.
<PageLayout>
    <Header>
        <MenuBar>
            <SaveContextButton />
            <RefreshContextButton />
        </MenuBar>
    </Header>
    <Navigation>
        <!-- Side navigation content -->
    </Navigation>
    <Body>
        <!-- Main page content -->
    </Body>
    <Footer>
        <FluentLabel>© My Company 2026</FluentLabel>
    </Footer>
</PageLayout>

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.

<PageLayout HeaderVisible="true"
            NavigationVisible="false"
            FooterVisible="true">
    <Header>Page Title</Header>
    <Body>Content without side navigation</Body>
    <Footer>Footer</Footer>
</PageLayout>

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.

<PageLayout HeaderClass="my-header"
            HeaderStyle="background-color: var(--neutral-layer-4);"
            BodyClass="my-body"
            BodyStyle="padding: 2rem;"
            Class="my-page"
            Style="min-height: 100vh;">
    <Header>Styled Header</Header>
    <Body>Styled Body</Body>
</PageLayout>

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.

<PageLayout>
    <Header>Main Header</Header>
    <Body>
        <PageLayout>
            <Header>
                <MenuBar>
                    <SaveContextButton />
                </MenuBar>
            </Header>
            <Body>
                <!-- Sub-page content -->
            </Body>
        </PageLayout>
    </Body>
</PageLayout>

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.

Blazor example
Header Area
Scrollable Navigation Area
Scrollable Body Area
Footer Area
React example

Visibility Controls

Use the toggles below to show and hide the Header, Navigation, and Footer areas.

Blazor example
Show Header? Show Navigation? Show Footer?
Header Area
Scrollable Navigation Area
Scrollable Body Area
Footer Area
React example
Blazor

PageLayout Class

Parameters

Name
Type
Default
Description
BodyRenderFragment?
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.
BodyClassstring?
CSS class applied to the body element.
BodyStylestring?
Inline CSS style applied to the body element.
FooterRenderFragment?
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.
FooterClassstring?
CSS class applied to the footer element.
FooterStylestring?
Inline CSS style applied to the footer element.
FooterVisiblebool
True
Controls whether the footer area is rendered. When set to false, the footer is removed from the grid layout entirely. Defaults to true.
HeaderRenderFragment?
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.
HeaderClassstring?
CSS class applied to the header element. Use this to apply custom styling such as background colors or borders.
HeaderStylestring?
Inline CSS style applied to the header element.
HeaderVisiblebool
True
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.
NavigationRenderFragment?
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.
NavigationClassstring?
CSS class applied to the navigation element.
NavigationStylestring?
Inline CSS style applied to the navigation element.
NavigationVisiblebool
True
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.
ValidationSummaryVisiblebool
True
Controls whether the validation summary is displayed. Defaults to true.
Name: Body
Type: 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: BodyClass
Type: string?
Description: CSS class applied to the body element.
Name: BodyStyle
Type: string?
Description: Inline CSS style applied to the body element.
Name: Footer
Type: 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: FooterClass
Type: string?
Description: CSS class applied to the footer element.
Name: FooterStyle
Type: string?
Description: Inline CSS style applied to the footer element.
Name: FooterVisible
Type: 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: Header
Type: 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: HeaderClass
Type: string?
Description: CSS class applied to the header element. Use this to apply custom styling such as background colors or borders.
Name: HeaderStyle
Type: string?
Description: Inline CSS style applied to the header element.
Name: HeaderVisible
Type: 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: Navigation
Type: 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: NavigationClass
Type: string?
Description: CSS class applied to the navigation element.
Name: NavigationStyle
Type: string?
Description: Inline CSS style applied to the navigation element.
Name: NavigationVisible
Type: 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: ValidationSummaryVisible
Type: bool
Default: True
Description: Controls whether the validation summary is displayed. Defaults to true.
 React