How to use the menu with events

I really like the menu control and would like to use it for a reason that doesn't use the path, but does call a method when clicked, similar to how "button @click=..." does.

Is there a way to call a method from inside of a MenuItem from where I can call an event, or some other way to call an event?


Hi @Daniel,

UPDATE: Using the click attribute no longer works because the Menu component now has a dedicated Click event.

The menu item supports custom attributes. This allows you to set a click handler

 <RadzenMenuItem Text="Text" @onclick="@(args => Console.WriteLine(args))">

UPDATE: Using the click attribute no longer works because the Menu component now has a dedicated Click event.

I gave up too soon. It appears it does allow a click hanlder, but only on the first menuitems menuitem.
The menuitems have to highlight from mouse-over, and only the first one in each column will highlight.
I have tried reversing the order and it still holds true, the one that would not highlight before now highlights, and vice verse.
Edit: On a hunch I put back the style="height:120px" and this fixed it.
thank you, and your product is great! I am sure I will be a paying subscriber after this virus thing is over.

This example doesn't work.
Click on RadzenMenuItem doesn't fire onclick event.

Do you have to determine the selected menu item by the text property?

i have same issue what i am missing has any one solved it ?

You can check the update of this post:

thats what exactly i did but its not working

Your code still shows plain HTML @onclick not RadzenMenu Click.

You are the boss! thank you .. here is how i did it.

and then

Could we Have a Click event for the RadzenMenuItem?

1 Like

I struggled with this a bit so hopefully this may help. My main problem was not paying attention to the fact the Click goes on the menu level. Not on the Menu Item. This solution is for a hybrid navigation where some items change the page. Other Items simply swap out the items on the current page. This is a test only page so it is small, I don't recommend this if you have media on the page. Please excuse the icons as I am still working on this. If it has been more than a month since this post you will be able to see it in action at


Just in case anyone is curious about the landing page. Here is that code

While onclick is taken, you can use onmousedown or onmouseup. Here's a working example from one of my apps:

    <RadzenMenu Style="z-index: 999">
        <RadzenMenuItem Text="Grid Page Size" Icon="grid_on" Style="z-index: 999;">
            <RadzenMenuItem Text="15" @onmouseup="@(() => SetPageSize(15))"></RadzenMenuItem>
            <RadzenMenuItem Text="30" @onmouseup="@(() => SetPageSize(30))"></RadzenMenuItem>
            <RadzenMenuItem Text="60" @onmouseup="@(() => SetPageSize(60))"></RadzenMenuItem>
            <RadzenMenuItem Text="100" @onmouseup="@(() => SetPageSize(100))"></RadzenMenuItem>
        <RadzenMenuItem Text="Refresh" Icon="refresh" @onmouseup="@Refresh"></RadzenMenuItem>

Work fine for me, like this

            <RadzenMenuItem Text="+Opções">
                <RadzenMenuItem Text="Incluir"  Icon="input">
                        <a href="#" @onclick="Incluir" @onclick:preventDefault>Incuir</a>
                <RadzenMenuItem Text="Home" Path="/" Icon="home"></RadzenMenuItem>