New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Templates Overview

RadNavigation nodes are extremely configurable. In addition to the preset skins,you can customize their appearance by adding custom images, using CSS classes, or creating custom skins. However, if you want to embed other HTMLcontrols in a navigation node, you must use templates. You can embed any content inside a NodeTemplate, including:

  • HTML markup

  • ASP.NET server controls

  • Other third-party controls (including other Telerik controls)

If a node has a template, it will not render an anchor (<a>) with the NavigateUrl property. If you want the node to act as an anchor, you should add the desired hyperlink in the template.

At design time, add node template to your RadNavigation control:

<telerik:RadNavigation runat="server" ID="RadNavigation1" Skin="Default">
    <NodeTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "Text").ToString() %>'></asp:Label>
    </NodeTemplate>
    <Nodes>
        <telerik:NavigationNode Text="Home">
        </telerik:NavigationNode>
        <telerik:NavigationNode Text="Products">
            <Nodes>
                <telerik:NavigationNode Text="Product 1"></telerik:NavigationNode>
                <telerik:NavigationNode Text="Product 2"></telerik:NavigationNode>
                <telerik:NavigationNode Text="Product 3"></telerik:NavigationNode>
            </Nodes>
        </telerik:NavigationNode>
        <telerik:NavigationNode Text="About">
        </telerik:NavigationNode>
    </Nodes>
</telerik:RadNavigation>

See Also

In this article