App Bar

Represents a bar 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.

Rendered in 0 ms
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" Color="Color.Primary"></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;
    }
}
App Bar with Menu

You can attach MudMenu's to the appbar, allowing for a myriad of appbar options.

<MudAppBar Color="Color.Primary" Fixed="false">
    <MudMenu Dense
             Variant=Variant.Text
             Size=Size.Medium
             Color=Color.Inherit
             Icon=@Icons.Material.TwoTone.MoreVert
             AnchorOrigin=Origin.CenterCenter TransformOrigin=Origin.TopRight>

        <!-- User Menu -->
        <MudMenu Dense
                 Variant=Variant.Text
                 Size=Size.Medium
                 Color=Color.Inherit
                 Icon=@Icons.Material.TwoTone.MoreVert
                 AnchorOrigin=Origin.CenterRight TransformOrigin=Origin.TopLeft
                 ActivationEvent=MouseEvent.MouseOver>

            <!-- Settings -->
            <ActivatorContent>
                <MudMenuItem Icon=@Icons.Material.TwoTone.Settings IconColor=Color.Primary IconSize=Size.Medium AutoClose=@false>
                    <MudText Class="ml-n5" Color=Color.Default>Settings</MudText>
                </MudMenuItem>
            </ActivatorContent>

            <!-- Theme -->
            <ChildContent>
                <MudMenuItem Icon=@Icons.Material.TwoTone.DarkMode IconColor=Color.Secondary IconSize=Size.Medium>
                    <MudText Class="ml-n5" Color=Color.Default>Dark Theme</MudText>
                </MudMenuItem>
            </ChildContent>
        </MudMenu>

        <MudDivider />

        <!-- Sign In -->
        <MudMenuItem Href="/" ForceLoad Icon=@Icons.Material.TwoTone.Login IconColor=Color.Primary IconSize=Size.Medium>
            <MudText Class="ml-n5" Color=Color.Default>Sign In</MudText>
        </MudMenuItem>
        <!-- Sign Out -->
        <MudMenuItem Href="/" ForceLoad Icon=@Icons.Material.TwoTone.Logout IconColor=Color.Primary IconSize=Size.Medium>
            <MudText Class="ml-n5" Color=Color.Default>Sign Out</MudText>
        </MudMenuItem>

    </MudMenu>
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>
@code {

}
Contextual App Bar

You can conditionally transform the app bar into a contextual action bar with page specific action buttons.

<MudLayout>
    <MudAppBar Color="Color.Primary" Fixed="false" Contextual>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
        <MudSpacer />
        <MudIconButton Icon="@(Deleted > 0 ? @Icons.Material.Filled.FlipToBack : @Icons.Material.Filled.FlipToFront)" Color="Color.Inherit" OnClick="ResetItems" />
    </MudAppBar>
    <MudMainContent Class="pt-4">
        <div class="d-flex flex-wrap gap-4">
            @for (int i = 0; i < _images.Length; i++)
            {
                var index = i;

                if (_images[index].IsDeleted) continue;

                <MudPaper Width="200px" Height="150px" Elevation="0" Class="d-flex align-center justify-center" Style="background-color:inherit">
                    <MudImage Src="@($"images/{_images[index].Title}.jpg")" Width="@_images[index].Width" Height="@_images[index].Height"
                              Elevation="25" ObjectFit="ObjectFit.Cover" Class="rounded-lg"
                              @onclick="@(() => SelectImage(index))"/>
                </MudPaper>
            }
        </div>
    </MudMainContent>
</MudLayout>

<MudContextualActionBar Color="Color.Tertiary" Fixed="false" Visible="ShowContext">
    <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Inherit" Edge="Edge.Start" OnClick="UnselectItems" />
    <MudText Class="pl-8" Typo="Typo.h6">@($"{_selected.Count} Selected") </MudText>
    <MudSpacer />
    <MudIconButton Icon="@Icons.Material.Filled.Share" Color="Color.Inherit" />
    <MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Inherit" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Inherit" OnClick="DeleteSelectedItems" />
</MudContextualActionBar>
@code {
    private bool ShowContext => _selected.Count > 0;

    private readonly HashSet<Image> _selected = [];
    private int Deleted => _images.Count(x => x.IsDeleted);
    private readonly Image[] _images = [ new Image("sweden"), new Image("iceland"), new Image("castle"), new Image("tractor"), new Image("door"), new Image("pilars") ];

    private void SelectImage(int index)
    {
        var image = _images[index];
        bool isSelected = _selected.Contains(image);

        _images[index] = image with { Width = isSelected ? 200 : 100, Height = isSelected ? 150 : 75 };

        if (isSelected)
            _selected.Remove(image);
        else
            _selected.Add(_images[index]);
    }

    private void UnselectItems()
    {
        for (int index = 0; index < _images.Length; index++)
        {
            var image = _images[index];

            if (_selected.Contains(image))
            {
                _images[index] = image with { Width = 200, Height = 150 };
            }
        }

        _selected.Clear();
    }

    private void DeleteSelectedItems()
    {
        for (int index = 0; index < _images.Length; index++)
        {
            var image = _images[index];

            if(_selected.Contains(image))
            {
                _images[index] = image with { Width = 200, Height = 150, IsDeleted = true };
            }
        }

        _selected.Clear();
    }

    private void ResetItems()
    {
        for (int index = 0; index < _images.Length; index++)
        {
            var image = _images[index];

            if (image.IsDeleted)
            {
                _images[index] = image with { IsDeleted = false };
            }
        }
    }

    private record Image(string Title, int Width = 200, int Height = 150, bool IsDeleted = false);
}
An unhandled error has occurred. Reload 🗙