ASP.NET Core PanelBar Images

The Telerik UI for ASP.NET MVC PanelBar enables you to add images and sprites to each item to visually communicate its purpose to the users. For example, you can set the image URL through the ImageUrl() method, as demonstrated in this example where the items of the first PanelBar are rendered with an image and some text.

Rather than including each image as a separate image file, you can set a single image with CSS by utilizing the background-image property, and specify the respective sprite CSS class for each item by utilizing the SpriteCssClasses() option. In this way, the total number of HTTP requests will be reduced. In the current example, the second PanelBar uses sprites.

This PanelBar example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core 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 ASP.NET Core or ThemeBuilder.