Menu for Navigation

The Menu can be used to navigate between different pages in the application. It can generate the needed links for you through its UrlField when data binding.

Basics

To use the Blazor Menu for navigating between pages:

• Add the Menu to your application.
  • You may want to add it in the MainLayout.razor outside of the @Body, for example, in the header section of your app.
• Provide a collection of models that describe the pages you want the user to navigate to.
• Set the Url property of the Menu model to the desired destination page. Alternatively, use a different property and set it to the UrlField parameter of the Blazor Menu component.

Example

Use the Menu to navigate between pages

@* This a basic example of a Menu used as Navigation. *@

<TelerikMenu Data="@MenuData"></TelerikMenu>


@code {
    public List<MenuModel> MenuData { get; set; }

    protected override void OnInitialized()
    {
        GenerateMenuData();
    }

    public void GenerateMenuData()
    {
        MenuData = new List<MenuModel>()
        {
            new MenuModel()
            {
                Text = "Contact us",
                Url = "/contacts",
                Icon = SvgIcon.Envelope
            },
            new MenuModel()
            {
                Text = "Settings",
                Url = "/settings",
                Icon = SvgIcon.Gear,
                Items = new List<MenuModel>()
                {
                    new MenuModel()
                    {
                        Text = "Profile Settings",
                        Url = "/profile",
                        Icon = SvgIcon.User
                    },
                    new MenuModel()
                    {
                        Text = "Language Settings",
                        Url = "/language",
                        Icon = SvgIcon.Globe
                    }
                }
            }
        };
    }

    public class MenuModel
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public ISvgIcon Icon { get; set; }
        public List<MenuModel> Items { get; set; }
    }
}

Notes

• The UrlField has a default value (Url) and that will be used if present in the model even if you do not define it explicitly.

• The component uses the NavigationManager from the framework to perform the navigation based on the value from the UrlField.

  • If you have a template that adds anchors, or use a click event to navigate the user yourself, this may lead to double navigation and errors, especially if your model has a field called Url. To avoid such problems, either let the Telerik component do the navigation and remove the application-specific code that does it as well, or remove the URL setting (either rename the model field, or point the UrlField to a non-existing field).

See Also

• Menu Overview
• Menu Data Binding
• Menu Templates