hierarchical-data.md

title	page_title	description	slug	tags	published	position
Hierarchical Data	Menu - Data Binding to Hierarchical Data	Data Binding the Menu for Blazor to hierarchical data.	components/menu/data-binding/hierarchical-data	telerik,blazor,menu,data,bind,databind,databinding,hierarchical	true	2

Menu Data Binding to Hierarchical Data

This article explains how to bind the Menu for Blazor to hierarchical data. @template

Hierarchical data means that the collection of child items is provided in a field of its parent's model. By default, this is the Items field. If there are items for a certain node, it will have an expand icon. The HasChildren field can override this, however, but it is not required for hierarchical data binding.

This approach of providing nodes lets you gather separate collections of data for certain sections or areas. Note that all menu item models must be of the same type.

caption Example of using hierarchical data in a menu (for brevity, URLs are omitted)

@* Hierarchical menu data source and navigation through different views *@

<TelerikMenu Data="@MenuItems"
             ItemsField="@nameof(MenuItem.SubSectionList)"
             TextField="@nameof(MenuItem.Section)"
             UrlField="@nameof(MenuItem.Page)">
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
        {
            // sample URLs for SPA navigation
            new MenuItem()
            {
                Section = "Company",
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "Overview",
                        Page = "company/overview"
                    },
                    new MenuItem()
                    {
                        Section = "Events",
                        Page = "events/all"
                    },
                    new MenuItem()
                    {
                        Section = "Careers",
                        Page = "careers"
                    }
                }
            },
            // sample URLs for external navigation
            new MenuItem()
            {
                Section = "Services",
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "Consulting",
                        Page = "https://mycompany.com/services/consulting"
                    },
                    new MenuItem()
                    {
                        Section = "Education",
                        Page = "https://mycompany.com/services/education"
                    }
                }
            },
            new MenuItem()
            {
                Section = "Contact",
                Page = "https://mycompany.com/contact"
            }
        };

        base.OnInitialized();
    }
}

caption The result from the code snippet above, after hovering the "Company" item

See Also

• [Menu Data Binding Basics]({%slug components/menu/data-binding/overview%})
• Live Demo: Menu Hierarchical Data
• [Binding to Flat Data]({%slug components/menu/data-binding/flat-data%})