RadSiteMap - Styling nodes with children

Styling Telerik’s red RadSiteMap gets tricky the moment you want different visual rules for nodes that have children. The control renders every level with similar markup, so distinguishing leaf nodes from expandable parents requires a bit of selector strategy. In this article, we’ll walk through how to reliably target Level-1 items with child lists—giving you precise control over typography, spacing, and color without breaking the built-in theme.

 

Related Articles

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

Many of the menu pages on this site use the RadSiteMap.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.master" CodeBehind="Menu.aspx.vb" Inherits="DynDeveloper.Menu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .Level1Title {
            color:#333333;
            font-size:15px;
            font-weight:bold;
            margin:0px 0px 5px 0px;
        }
        /*target the level 1 nodes that have children */
        .rsmLevel1 > .rsmItem:has(> ul.rsmLevel2) > .rsmTemplate .rsmLink {
            font-weight: bold !important;
            font-size:15px !important;
        }
 
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h1><asp:Label runat="server" ID="lblTitle"></asp:Label></h1>
 
    <telerik:RadSiteMap runat="server" ID="SiteMap1" ShowNodeLines="true"  >
        <LevelSettings>
            <telerik:SiteMapLevelSetting Level="0"  Layout="List" ListLayout-RepeatDirection="Vertical" ListLayout-RepeatColumns="3">
                <NodeTemplate>
                    <span class="Level1Title"><%# DataBinder.Eval(Container.DataItem, "title") %></span>
                    <%# DataBinder.Eval(Container.DataItem, "DocsLink") %>
                    <%# DataBinder.Eval(Container.DataItem, "DemoLink") %><br />
                    <%# DataBinder.Eval(Container.DataItem, "IntroText") %>
                </NodeTemplate>
            </telerik:SiteMapLevelSetting>
            <telerik:SiteMapLevelSetting Level="1" >
                <NodeTemplate>
                    <span class="Level2Title">
                        <a class="rsmLink" href='<%# DataBinder.Eval(Container.DataItem, "url2") %>'><%# DataBinder.Eval(Container.DataItem, "title") %></a>
                    </span>
                </NodeTemplate>
            </telerik:SiteMapLevelSetting>
            <telerik:SiteMapLevelSetting Level="2" ></telerik:SiteMapLevelSetting>
        </LevelSettings>
    </telerik:RadSiteMap>
</asp:Content>

 

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