MudBlazor - Blazor Component Library

API

<MudAppBar>

Basic App Bar

App bars have two types: regular and contextual action bar. Below is an example of a regular app bar.

A contextual action bar is something that will provide actions for a selected item on the page.

A top bar can transform into a contextual action bar and be dismissed at any time.

<MudAppBar Color="Color.Primary" Fixed="false">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

Usage

You can customize the Elevation of an AppBar, as well as set the Dense property to save space.

Elevation

Dense

<MudAppBar Color="Color.Primary" Fixed="false" Dense="@dense" Elevation="@elevation">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

<MudGrid>
    <MudItem md="6" sm="12">
        <MudSlider @bind-Value="@elevation" Min="0" Max="24" ValueLabel="true">Elevation</MudSlider>
    </MudItem>
    <MudItem md="6" sm="12">
        <MudSwitch @bind-Value="@dense" Label="Dense" Class="mt-6" Color="Color.Primary"></MudSwitch>
    </MudItem>
</MudGrid>

@code
{
    int elevation = 4;
    bool dense = false;
}