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

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.

<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>

Top header

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>

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>

Best Practices

Predictable Shell

Keep navigation and global actions in consistent regions across views. Test headers, footers, sidebars, and scrolling together at supported breakpoints, including pages with very little content and pages long enough to scroll.

Preserve Semantic Structure

Give each view one clear main content region with a logical heading and focus order. Use layout components for page structure and Blazorise spacing utilities for local alignment rather than embedding presentational inline styles throughout the markup.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.