MudMenuItem not displaying on click on MudMenu

56 views Asked by At

I am trying to create a MudMenu dynamically, deserializing a json and building the menu hierarchy as follows. The menu is showing, however clicking the menu is not opening the submenu...

    <MudLayout>
    <MudAppBar Elevation="1">
        <MudMenu FullWidth="true">
            <ActivatorContent>
                <MudAvatar Size="Size.Large">
                    <MudImage class="myImage" Src="/Images/paradise_logo.png" Elevation="25"/>
                </MudAvatar>
            </ActivatorContent>
        </MudMenu>

        @if(categories != null) 
        {
            @foreach (var category in categories.AllCategories.Values)
            {
                <MudMenu StartIcon="@Icons.Material.Rounded.Grain" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" Label="@category.CategoryName" Color="Color.Primary" Variant="Variant.Filled">
                    <ChildContent>
                        @foreach(var subCategory in category.SubCategories) {
                            <MudMenuItem>"@subCategory.Value.CategoryName"</MudMenuItem>
                        }
                    </ChildContent>
                </MudMenu>
            }
        }

        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>
1

There are 1 answers

5
Qiang Fu On

If you are using InterActiveServer per page/component it will not work. You need to change the App.razor to global Interactive server mode.

<Routes @rendermode="InteractiveServer" />

If you are using Blazor Webassembly standalone. To use MudMenu you need to make sure following steps have been finished.

  1. builder.Services.AddMudServices(); in the program.cs
  2. Following code are added to "wwwroot/index.html"
...
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
...
<script src="_content/MudBlazor/MudBlazor.min.js"></script>

3.Following component are added to Mainlayout.razor

@inherits LayoutComponentBase
<MudThemeProvider />
...

Then it will work.
Reference: https://www.mudblazor.com/getting-started/installation#manual-install-add-components