Basic Layout

MudBlazor comes with many components of varying functions and behaviours. Some are built to control the layout of your application, and others may be used to provide other key functions, behaviours and operations for these components.

Notably, the three most important providers are MudThemeProvider, MudDialogProvider and MudSnackbarProvider. If you have followed the installation guide, these will already be in your MainLayout page.

MudThemeProvider is the component which provides your app with theme settings such as colors, fonts, shadows and other layout properties. It provides the MudBlazor theme by default. There should only exist one instance of the MudThemeProvider in your project.

Another two notable layout components are MudLayout and MudMainContent. MudLayout should be placed in the root of your application within the MainLayout page. Directly inside MudLayout you can place MudMainContent - this is where your page body will reside.
To better illustrate this, let's open the MainLayout.razor page and create a basic MudBlazor layout.

Appbar & Drawer

Before MudMainContent we can add MudAppBar and MudDrawer components so they are included in all pages using this layout.

Functionality

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

Now to add some basic functionality. Adding a MudIconButton will open and close the drawer, whilst adding a NavMenu will provide some basic navigation.

Navigation Menu

And our MyNavMenu.razor looks like this.

Content & Containers

Before you go on and add content to your pages, depending on what you are building you may want to make use of the MudContainer component to center some content and add some gutters to your page. This can be done either directly in your MainLayout.razor page, or, alternatively, do this in each individual page.

Ready for More?