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

Menu - Images

  • Images.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 allows you to add icons for each item to visually communicate its purpose to the users. The supported visual options are Telerik font icons or custom font icons.

You can use the default data bindings in your model, so the Menu will automatically recognize the fields it needs to get the icons from. The default model property name is Icon.

Otherwise, you need a data binding, so the Menu can render the desired icons. Set the IconField parameter to point to the string model property that contains the icon name or CSS class.

The demo above demonstrates a Telerik Blazor Menu component that uses hierarchical data including icons for visual representation of the items’ purpose. The MenuItem model contains the default field names for the icons and images and therefore additional binding for the icons in the Menu component declaration is not needed.

This Blazor Menu Images 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.