New to Telerik UI for Blazor? Download Free 30-day trial

Menu - Flat Data

  • Flat-data.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming


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 flat data.

While in the hierarchical data collections the model of the parent item contains a list of its children, in the flat data collections all records are available at one level. The parent-child relationships are created through internal data in the model. You can use the default data binding in your model, so the Menu will automatically recognize the properties and create the relations. The default ParentId field points to the default Id of the item that will contain the current item. The root level item has null for ParentId.

In case you are using custom property names, you should point the ParentIdField and IdField properties of the Menu to the corresponding fields of your model.

The demo above demonstrates a Telerik Blazor Menu component that uses flat data. The parent-child relationship is created through the SectionId and Id fields of the MenuItem model.

This Blazor Menu Flat Data example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.