Layouts

Getting started with MudBlazor for faster and easier web development.

Basic Layout

MudBlazor comes with many components, some of them are built to control the layout of your application or provide key functions to other layout based components and function together in a specific way.

First we have three providers MudThemeProvider, MudDialogProvider and MudSnackbarProvider these should be in your file already if you followed the installation page.

MudThemeProvider this component provides your app with all your theme settings like colors, fonts, shadows and some layout properties. It provides the default MudBlazor theme by default and you should only have one MudThemeProvider.

Then we have the two main layout components MudLayout and MudMainContent where MudLayout will be the root of your application where main layout components exists. Directly inside MudLayout we will place MudMainContent this is where your page body normally is.
To better illustrate this, let's open our MainLayout.razor and create a basic MudBlazor layout.

@inherits LayoutComponentBase

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>
Appbar & Drawer

Before MudMainContent we can add MudAppBar and MudDrawer so its apart of all pages using this layout.

@inherits LayoutComponentBase

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudAppBar>
        My Application
    </MudAppBar>
    <MudDrawer Open="true">

    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>
Functionality

Because we added the components directly inside MudLayout, MudMainContent takes the height of our MudAppBar and uses that as top padding and if MudDrawer is open the main content gets the correct left or right margin.

Now lets add some basic functionality. MudIconButton to open and close the drawer and we will add our NavMenu for basic navigation.

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        My Application
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen">
        <MyNavMenu/>
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>
@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}
<MudNavMenu>
    <MudNavLink Href="/" Match="NavLinkMatch.All">Dashboard</MudNavLink>
    <MudNavLink Href="/servers" Match="NavLinkMatch.Prefix">Servers</MudNavLink>
    <MudNavGroup Title="Settings" Expanded="true">
        <MudNavLink Href="/users"  Match="NavLinkMatch.Prefix">Users</MudNavLink>
        <MudNavLink Href="/security"  Match="NavLinkMatch.Prefix">Security</MudNavLink>
    </MudNavGroup>
    <MudNavLink Href="/about"  Match="NavLinkMatch.Prefix">About</MudNavLink>
</MudNavMenu>
Content & Containers

Before you go on and add content to your pages depending on what you are building you might want to use MudContainer to center some content and add some gutters to your page. This can be done either directly in your MainLayout.razor or do it per page.

@inherits LayoutComponentBase

<MudMainContent>
    <MudContainer MaxWidth="MaxWidth.Medium">
        @Body
    </MudContainer>
</MudMainContent>
Ready for More?

Installation

Getting Started

Wireframes

Copy, paste layouts

An unhandled error has occurred. Reload 🗙