Menu - Hierarchical Data

The Telerik UI for Blazor Menu displays data in a traditional menu-like structure. It allows you browse through the items and their children, and supports data binding to hierarchical data or flat data.

The component rendering will be the same regardless of the data type, however, its configuration will be different when using flat or hierarchical data. The current demo targes data binding to hierarchical data.

While in the flat data collections all records are available at one level, in the hierarchical data collections the model of the parent item contains a list of its children.

You can use the default data binding in your model, so the Menu will automatically recognize the field that contains the child items. The default property name is Items . Otherwise, you should point the ItemsField parameter of the Menu to the field from your model that contains the collection of subitems.

The demo above demonstrates a Telerik Blazor Menu component that uses hierarchical data. The MenuItem model has a SubSectionList field – a List< MenuItem> that contains the child menu items. Each parent menu item can be clicked to display the list of child menu items. By default, the menu items are shown on MouseEnter, but you can modify this behavior using the ShowOn and HideOn parameters.
As the SubSectionList field name is different than the default Items field name required for the data binding, the Menu cannot automatically recognize it and needs additional data binding. Take a look at the component declaration – the ItemsField points to the SubSectionList field. This field binding is required, so the component can get and properly render the child items.