Layouts - MudBlazor

The following sections assume you have installed Mudblazor and completed the steps on our Installation page.

Usage

MudBlazor comes with allot of components, some of them are built to control the layout of your application or provide key functions to other layout based components and function togheter 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 propertys. 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.

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

<MudLayout>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

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

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

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

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

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.

<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">
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

And our NavMenu.razor looks like this.

<MudNavMenu>
    <MudNavLink Href="/dashboard">Dashboard</MudNavLink>
    <MudNavLink Href="/servers">Servers</MudNavLink>
    <MudNavGroup Title="Settings" Expanded="true">
        <MudNavLink Href="/users">Users</MudNavLink>
        <MudNavLink Href="/security">Security</MudNavLink>
    </MudNavGroup>
    <MudNavLink Href="/about">About</MudNavLink>
</MudNavMenu>

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.

<MudMainContent>
    <MudContainer MaxWidth="MaxWidth.Medium">
        @Body
    </MudContainer>
</MudMainContent>

Ready for More?

Installation

Getting Started

Wireframes

Copy, paste layouts