Styling the RadSiteMap

If you'll go into the Knowledge Base link above and then click on any of the links, you'll see a page that is powered by the Telerik RadSiteMap control. So... styling the controls is pretty important to me. 

Styling Telerik’s RadSiteMap is one of those quiet power moves that transforms a basic navigation tree into a polished, intuitive guide for your users. In this article, we’ll explore how to take the default sitemap and shape it into something cleaner, more consistent, and visually aligned with your application’s design language—all without fighting the control.

Related Articles

... and you 'll find more on the Telerik ASPNET Menu

To create links inside your NodeTemplate that match the native RadSiteMap appearance, you need to use the correct HTML and CSS Class. For that you need to:

• Wrap your link text in an <a> tag.
• Assign the rsmLink CSS class, which is used by RadSiteMap for its native links.
• Bind the href attribute to your data field (like DocsLink or DemoLink).
If you want to show both Docs and Demo links: 

<NodeTemplate>
    <a class="rsmLink"
        href='<%# DataBinder.Eval(Container.DataItem, "DocsLink") %>'>Docs
    </a>
    <a class="rsmLink"
        href='<%# DataBinder.Eval(Container.DataItem, "DemoLink") %>'>Demo
    </a>
</NodeTemplate>

 

This ensures that the node items have the proper styles applied to them.

 

 

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences