Submenus not shown

[Jens Chr. I.]

I have this code.

        <SfAppBar ColorMode="AppBarColor.Primary">

            <SfMenu TValue="MenuItem" CssClass="e-inherit menu">

                <MenuItems>

                    <MenuItem Text="Hjem" IconCss="e-icons e-home" OnClick="@(() => GoTo(""))">

                        <MenuItems>

                            <MenuItem Text="Om IVP" IconCss="e-icons e-about"></MenuItem>

                            <MenuItem Text="Kontakt" IconCss="e-icons e-about"></MenuItem>

                        </MenuItems>

                    </MenuItem>

                </MenuItems>

                <MenuEvents TValue="MenuItem" OnOpen="OmIVP" ItemSelected="itemSelected"></MenuEvents>

            </SfMenu>

            <AppBarSpacer></AppBarSpacer>

            <AppBarSeparator></AppBarSeparator>

            <SfButton CssClass="e-btn" Content="Log ind" IconCss="custom-CommentsBar-icon" OnClick="@(() => GoTo("logind"))"></SfButton>

        </SfAppBar>

When I run this the submenus is not showing and I cant figure out what I am missing

[Keerthikaran Venkatachalam]

Hi Jens,

We have checked the reported query, and it seems that the menu component is a script-based component. We suspect that the script is not properly referenced in your project sample, which is causing the issue.

Please find below the details for referring to script references to render our Syncfusion Blazor components.

Please refer to the script as below if you are using the individual NuGet packages (Syncfusion.Blazor. DropDowns, Syncfusion.Blazor.SplitButtons, and Syncfusion.Blazor.Grids).

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Please refer to the script as below if you are using the single NuGet package (Syncfusion.Blazor).

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

I have attached the sample, video demonstration, and UG link for reference.

UG Link: https://blazor.syncfusion.com/documentation/menu-bar/getting-started-webapp#add-stylesheet-and-script-resources

If you are still facing issues, could you please share the issue's replicable working sample or replicate the issue in our sample with replication steps and a video demonstration, and share which package version you are using in your project? Based on that, we will check and provide you with a better solution quickly.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: ProjectSample_3e0c5505.zip

[Jens Chr. I.]

Well your sample works fine, but I still can get my project to work.
My project is in .NET 8, I don't know what your project is made in.

I have attached my project.

Attachment: IVPSolution_ebc5f303.zip

[Keerthikaran Venkatachalam]

Hi Jens,

In .NET 8, you need to add the Interactive render mode, which is common for all Blazor components. Every component in a Blazor web app adopts a render mode to determine the hosting model it uses, where it is rendered, and whether or not it is interactive. Please refer to the link below.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes

To resolve this issue, please add the InteractiveAuto namespace in the App razor page. Please refer to the code snippet below.

    <HeadOutlet @rendermode="InteractiveServer" />

    <Routes @rendermode="InteractiveServer" />

Ug Link: https://blazor.syncfusion.com/documentation/menu-bar/getting-started-webapp

Please refer to the attached sample below and let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: IVPSolution_9d1db983.zip

[Jens Chr. I.]

That did the trick, thanks!

[Keerthikaran Venkatachalam]

You are welcome, Jens. Please get back to us if you need any other assistance

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.

[Mohammad]

I am having The same issue but I am using Both  Mixed Project Server and WASM The Problem happens when i start navigating inside the website then the menu stopped responding The AppBar and Menu in Client Side Project

i am using most of Syncfusion components none of them has any issue except the menu 

[Mohammad]

after i'v modified 

Added This Line

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

modified  this line in App.razor it solved the issue

<HeadOutlet @rendermode="InteractiveAuto" />

 

[Keerthikaran Venkatachalam]

Hi Mohammad,

In .NET 8, you need to add the Interactive render mode, which is common for all Blazor components. Every component in a Blazor web app adopts a render mode to determine the hosting model it uses, where it is rendered, and whether or not it is interactive. Please refer to the link below.

Link: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes 

When rendering the Menu component on the MainLayout page and navigating to another page, it is necessary to add the render mode property. To resolve this issue, please add the InteractiveAuto namespace in the App razor page. Please refer to the code snippet below.

[App.razor]

    <HeadOutlet @rendermode="InteractiveAuto"/>

    <Routes @rendermode="InteractiveAuto" />

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V