<div class="control-section">
                <div class="menu-control">
                    <SfMenu Items="@MenuItems">
                        <MenuEvents TValue="MenuItem" ItemSelected="@ItemSelected"></MenuEvents>
                    </SfMenu>
                </div>
            </div>

@code {
    public List<MenuItem> MenuItems = new List<MenuItem>{

        new MenuItem { Text = "Home", Url = "https://www.google.com/search?q=fashion"},

        new MenuItem{
            Text = "Store Categories",
            Items = new List<MenuItem>{
                new MenuItem { Text= "One", Id = "1" },
                new MenuItem { Text= "Two", Id = "2" }}
            }
    };

    private void ItemSelected(MenuEventArgs<MenuItem> e)
    {
        Console.WriteLine("itemSelected: " + e.Item.Id);
    }
}

<style>
    .e-menu-wrapper {
        text-align: center;
    }

    .menu-control {
        margin-top: 0px;
        text-align: right;
    }
</style>

Sources:

https://blazor.syncfusion.com/documentation/context-menu/how-to/open-dialog/

https://blazor.syncfusion.com/documentation/menu-bar/how-to/customize-menu-using-events/

Last modified: January 9, 2021

Author

Comments

Write a Reply or Comment