Blazorise Layout system

Structure application pages with headers, sidebars, content regions, and footers.

The <Layout> component is the outer structure for common application shells. It composes with <Bar>, utility parameters, and normal content components to create page layouts without custom wrapper markup.

A layout can include a horizontal header, an optional sidebar, the main content area, and a footer. Place application-wide navigation in LayoutHeader or LayoutSider, and render page content in LayoutContent.

Layout adjusts to desktop, tablet, and mobile screen sizes, while utility parameters handle most visual spacing, sizing, background, and alignment needs.

  • <Layout> The main container.

    • <LayoutHeader> The top container for a Bar or navigation.

    • <LayoutContent> The main content area.

    • <LayoutFooter> The bottom container for a Bar or navigation.

    • <LayoutSider> The sidebar container.

      • <LayoutSiderContent> The main content area of the sidebar.

Examples

Basic App Shell

Use LayoutHeader, LayoutContent, and LayoutFooter for a simple single-column application shell.
Sales Portal
Quarterly pipeline

Track open opportunities, team activity, and forecast changes from the main content region.

Updated 12 minutes ago 
<Layout Height="Height.Px(320)"
        Border="Border.Is1.Rounded"
        TextAlignment="TextAlignment.Center">
    <LayoutHeader Background="Background.Primary"
                  TextColor="TextColor.White"
                  Padding="Padding.Is3"
                  Flex="Flex.JustifyContent.Center.AlignItems.Center">
        Sales Portal
    </LayoutHeader>
    <LayoutContent Background="Background.Light"
                   Padding="Padding.Is4">
        <Card>
            <CardBody>
                <Heading Size="HeadingSize.Is5">Quarterly pipeline</Heading>
                <Paragraph Margin="Margin.Is0">
                    Track open opportunities, team activity, and forecast changes from the main content region.
                </Paragraph>
            </CardBody>
        </Card>
    </LayoutContent>
    <LayoutFooter Background="Background.Body"
                  Border="Border.Is1.OnTop"
                  Padding="Padding.Is3">
        Updated 12 minutes ago
    </LayoutFooter>
</Layout>

Header Above Sidebar

Place LayoutHeader before a nested Layout Sider when the header should span the full page width.

This pattern is common for products with global search, notifications, and account actions in the header, plus primary navigation in the sidebar.

Operations
Fulfillment

84 orders ready for dispatch.

Customer health

12 accounts need follow-up.

<Layout Height="Height.Px(360)"
        Border="Border.Is1.Rounded"
        Overflow="Overflow.Hidden">
    <LayoutHeader Background="Background.Primary"
                  TextColor="TextColor.White"
                  Padding="Padding.Is3">
        <Div Width="Width.Is100"
             Flex="Flex.JustifyContent.Between.AlignItems.Center"
             Gap="Gap.Is3">
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.LayerGroup" />
                <Span TextWeight="TextWeight.SemiBold">Operations</Span>
            </Div>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Button Color="Color.Light" Outline>
                    <Icon Name="IconName.Bell" />
                    <Badge Color="Color.Warning" Pill>2</Badge>
                </Button>
                <Button Color="Color.Light" Outline>
                    Account
                </Button>
            </Div>
        </Div>
    </LayoutHeader>
    <Layout Sider>
        <LayoutSider Width="Width.Px(230).Min(230).Max(230)"
                     Background="Background.Dark"
                     TextColor="TextColor.White">
            <LayoutSiderContent Width="Width.Is100">
                <Div Padding="Padding.Is3" Flex="Flex.Column" Gap="Gap.Is2">
                    <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                        <Icon Name="IconName.Dashboard" />
                        <Span>Overview</Span>
                    </Div>
                    <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                        <Icon Name="IconName.Receipt" />
                        <Span>Orders</Span>
                    </Div>
                    <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                        <Icon Name="IconName.Users" />
                        <Span>Customers</Span>
                    </Div>
                </Div>
            </LayoutSiderContent>
        </LayoutSider>
        <Layout>
            <LayoutContent Background="Background.Light"
                           Padding="Padding.Is4">
                <Row>
                    <Column ColumnSize="ColumnSize.Is12.Is6.OnTablet">
                        <Card>
                            <CardBody>
                                <CardTitle Size="HeadingSize.Is5">Fulfillment</CardTitle>
                                <Paragraph Margin="Margin.Is0">84 orders ready for dispatch.</Paragraph>
                            </CardBody>
                        </Card>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is12.Is6.OnTablet">
                        <Card>
                            <CardBody>
                                <CardTitle Size="HeadingSize.Is5">Customer health</CardTitle>
                                <Paragraph Margin="Margin.Is0">12 accounts need follow-up.</Paragraph>
                            </CardBody>
                        </Card>
                    </Column>
                </Row>
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

Sidebar With View Header

Put LayoutHeader inside the content-side layout when the header belongs to the current view rather than the whole application. This works well for dashboards, detail pages, and workspace screens with contextual actions.
Project Alpha
Workspace dashboard
Current sprint

18 tasks open, 6 in review, and 3 blocked by external dependencies. 

<Layout Sider
        Height="Height.Px(360)"
        Border="Border.Is1.Rounded"
        Overflow="Overflow.Hidden">
    <LayoutSider Width="Width.Px(230).Min(230).Max(230)"
                 Background="Background.Dark"
                 TextColor="TextColor.White">
        <LayoutSiderContent Width="Width.Is100">
            <Div Padding="Padding.Is3" Flex="Flex.Column" Gap="Gap.Is2">
                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                    <Icon Name="IconName.Briefcase" />
                    <Span TextWeight="TextWeight.SemiBold">Workspace</Span>
                </Div>
                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                    <Icon Name="IconName.FolderOpen" />
                    <Span>Projects</Span>
                </Div>
                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                    <Icon Name="IconName.Calendar" />
                    <Span>Calendar</Span>
                </Div>
                <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2" Padding="Padding.Is2">
                    <Icon Name="IconName.FileAlt" />
                    <Span>Files</Span>
                </Div>
            </Div>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Background="Background.Body"
                      Border="Border.Is1.OnBottom"
                      Padding="Padding.Is3"
                      Flex="Flex.JustifyContent.Between.AlignItems.Center">
            <Div>
                <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">
                    Project Alpha
                </Heading>
                <Small TextColor="TextColor.Muted">Workspace dashboard</Small>
            </Div>
            <Button Color="Color.Primary">
                Share
            </Button>
        </LayoutHeader>
        <LayoutContent Background="Background.Light"
                       Padding="Padding.Is4">
            <Card>
                <CardBody>
                    <CardTitle Size="HeadingSize.Is5">Current sprint</CardTitle>
                    <Paragraph Margin="Margin.Is0">
                        18 tasks open, 6 in review, and 3 blocked by external dependencies.
                    </Paragraph>
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
</Layout>

API

Parameters

Layout

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Layout.

 RenderFragmentnull
Loading

If true, an overlay will be created so the user cannot click anything until set to false.

 boolfalse
LoadingClass

Sets the custom classname for loading element.

 string
LoadingTemplate

Specifies the content to be rendered the loading container.

 RenderFragmentnull
Sider

Indicates that layout will contain sider container.

 boolfalse

LayoutHeader

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this LayoutHeader.

 RenderFragmentnull
Fixed

If true header will be fixed to the top of the page.

 boolfalse

LayoutFooter

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this LayoutFooter.

 RenderFragmentnull
Fixed

If true footer will be fixed to the bottom of the page.

 boolfalse

Events

Layout

Event Description Type
LoadingChanged

Notifies when loading state had changed.

 EventCallback<bool>
On this page