App Bar

An app bar is used to display actions, branding, navigation and screen titles.

Keeping the app bar persistent while browsing different pages will ease navigation and access to actions for your users.

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

4
<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"></MudSwitch>
    </MudItem>
</MudGrid>
@code
{
    int elevation = 4;
    bool dense = false;
}
Bottom App Bar

<MudLayout>
    <MudMainContent Class="pt-0">
        <MudList T="string">
            <MudListItem Text="App Bookmark Item 1" Icon="@Icons.Material.Filled.Bookmark" />
            <MudListItem Text="App Bookmark Item 2" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Primary" />
            <MudListItem Text="App Bookmark Item 3" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Secondary" />
            <MudListItem Text="App Bookmark Item 4" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Tertiary" />
            <MudListItem Text="App Bookmark Item 5" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Info" />
            <MudListItem Text="App Bookmark Item 6" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Success" />
            <MudListItem Text="App Bookmark Item 7" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Warning" />
            <MudListItem Text="App Bookmark Item 8" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Error" />
            <MudListItem Text="App Bookmark Item 9" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Dark" />
        </MudList>
    </MudMainContent>
    <MudAppBar Bottom="true" Fixed="true" Color="Color.Primary" Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.FavoriteBorder" Color="Color.Inherit" Edge="Edge.End" />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
</MudLayout>
@code{
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}
An unhandled error has occurred. Reload 🗙