This is a migrated thread and some comments may be shown as answers.

How to add icons to menu items populated by sitemap.

1 Answer 21 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Kallie asked on 10 Sep 2015, 11:52 AM



I have a Vertical RadMenu on master page that gets populated from a sitemap. I am using the Silk skin as the base skin with my own color modifications.

I want to use it as a NotificationMenu.

Example: People can add products by using a project registration Page. ProductRegistration.aspx. At the Menu Item there will be an Item called "New Products Registered". I want to add onto this menu item a type of count indicator (with small gray circle background ) that Counts the New Products out of the database table and displays it on the menu item. Of course if you click on the menuItem you must be redirected to the Page containing list of new products added (Radgrid)


Is there a better control to use or a better way to do this?


 <telerik:RadMenu ID="NotificationsMenu" runat="server" item DataSourceID="smNotificationsMenu" EnableEmbeddedSkins="False" 
                                    RenderMode="Lightweight" Skin="LeftMenuSkin"
                                    ShowToggleHandle="True" Flow="Vertical">



Kind Regards

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 Sep 2015, 02:19 PM
Hi Kallie,

For the purpose you can dynamically add some data attribute to the .rmRootLink of the RadMenu item. Value of this data attribute can be displayed by a pseudo element of the .rmRootLink.
<telerik:RadMenuItem Text="New Products Registered" CssClass="newProducts" />

var productsCount = 12;
$telerik.$(".newProducts .rmRootLink").attr("data-productsCount", productsCount);

.newProducts .rmRootLink:after {
    content: attr(data-productsCount);
    margin: 0 10px;
    padding: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 100px;

Please, find a sample project in the attachment.

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question