MudBlazor

App Bar

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.

Regular 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>

Elevation

You can change the App Bar elevation, with values from 0-25

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

Dense

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

Bottom App Bar

<MudLayout>
    <MudMainContent Class="pt-0">
        <MudList Clickable="true">
            <MudListItem Text="App Bookmark Item 1" Icon="@Icons.Filled.Bookmark" />
            <MudListItem Text="App Bookmark Item 2" Icon="@Icons.Filled.Bookmark" IconColor="Color.Primary" />
            <MudListItem Text="App Bookmark Item 3" Icon="@Icons.Filled.Bookmark" IconColor="Color.Secondary" />
            <MudListItem Text="App Bookmark Item 4" Icon="@Icons.Filled.Bookmark" IconColor="Color.Tertiary" />
            <MudListItem Text="App Bookmark Item 5" Icon="@Icons.Filled.Bookmark" IconColor="Color.Info" />
            <MudListItem Text="App Bookmark Item 6" Icon="@Icons.Filled.Bookmark" IconColor="Color.Success" />
            <MudListItem Text="App Bookmark Item 7" Icon="@Icons.Filled.Bookmark" IconColor="Color.Warning" />
            <MudListItem Text="App Bookmark Item 8" Icon="@Icons.Filled.Bookmark" IconColor="Color.Error" />
            <MudListItem Text="App Bookmark Item 9" Icon="@Icons.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 error has occurred. This application may no longer respond until reloaded. Reload 🗙