Static

<SfMenu TValue="MenuItem">
  <MenuEvents TValue="MenuItem" ItemSelected="@MenuItemSelected"></MenuEvents>
  <MenuItems>
    <MenuItem Text="Home" Id="Home"></MenuItem>
    <MenuItem Text="Menu 2" Id="Menu2"></MenuItem>
    <MenuItem Text="Menu 3" Id="Menu3"></MenuItem>
    <MenuItem Text="Menu 4" Id="Menu4"></MenuItem>
  </MenuItems>
</SfMenu>

Dynamic

@using Syncfusion.Blazor.Navigations

            <div class="control-section">
                <div class="menu-control">
                    <SfMenu Items="@MenuItems"></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 = "Categories",
            Items = new List<MenuItem>{
                new MenuItem { Text= "Washing Machine", Url= "https://www.google.com/search?q=washing+machine" },
                new MenuItem { Text= "Air Conditioners", Url= "https://www.google.com/search?q=air+conditioners"}}
            }
    };
}

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

    .menu-control {
        margin-top: 0px;
        text-align: right;
    }
</style>
Last modified: June 5, 2021

Author

Comments

Write a Reply or Comment