App Layout Component - ShadCn.Blazor

Basic

A simple layout with a sidebar and scrollable body.

Main Content

Your page content goes here. The body is scrollable when content overflows.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<AppLayout>
    <Sidebar>
        <SidebarHeader>
            <span class="font-semibold">Acme Inc</span>
        </SidebarHeader>
        <SidebarContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true">Dashboard</SidebarMenuItem>
                <SidebarMenuItem Href="/users">Users</SidebarMenuItem>
                <SidebarMenuItem Href="/settings">Settings</SidebarMenuItem>
            </SidebarMenu>
        </SidebarContent>
        <SidebarFooter>
            <div class="text-xs text-muted-foreground">v1.0.0</div>
        </SidebarFooter>
    </Sidebar>
    <AppLayoutMain>
        <AppLayoutBody Class="p-6">
            @Body
        </AppLayoutBody>
    </AppLayoutMain>
</AppLayout>

With Header

A layout with a fixed header above the scrollable body.

Dashboard Welcome back!

The header stays fixed while the body scrolls.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<AppLayout>
    <Sidebar>
        <SidebarHeader>
            <span class="font-semibold">Acme Inc</span>
        </SidebarHeader>
        <SidebarContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true">Dashboard</SidebarMenuItem>
                <SidebarMenuItem Href="/users">Users</SidebarMenuItem>
            </SidebarMenu>
        </SidebarContent>
        <SidebarFooter>
            <div class="text-xs text-muted-foreground">v1.0.0</div>
        </SidebarFooter>
    </Sidebar>
    <AppLayoutMain>
        <AppLayoutHeader Class="flex items-center px-6 py-3">
            <span class="text-lg font-semibold">Dashboard</span>
        </AppLayoutHeader>
        <AppLayoutBody Class="p-6">
            @Body
        </AppLayoutBody>
    </AppLayoutMain>
</AppLayout>

Collapsible Sidebar

Combine with a collapsible sidebar and a trigger in the header.

Dashboard

Click the sidebar trigger to collapse or expand the sidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<AppLayout>
    <Sidebar Collapsible="true" Collapsed="@@collapsed" CollapsedChanged="v => collapsed = v">
        <SidebarHeader>
            <SidebarTrigger />
            @if (!collapsed)
            {
                <span class="font-semibold">Acme Inc</span>
            }
        </SidebarHeader>
        <SidebarContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                    <Icon>🏠</Icon>
                    <ChildContent>Dashboard</ChildContent>
                </SidebarMenuItem>
                <SidebarMenuItem Href="/users" Title="Users">
                    <Icon>👤</Icon>
                    <ChildContent>Users</ChildContent>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarContent>
    </Sidebar>
    <AppLayoutMain>
        <AppLayoutHeader Class="flex items-center px-6 py-3">
            <span class="text-lg font-semibold">Dashboard</span>
        </AppLayoutHeader>
        <AppLayoutBody Class="p-6">
            @Body
        </AppLayoutBody>
    </AppLayoutMain>
</AppLayout>