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

Server-side Templates

RadNavigation fully supports templates. You can easily embed any content inside a RadNavigation template (even a server control like RadSearchBox as shown in this demo):

  • HTML markup
  • ASP.NET server controls
  • Third-party controls (other Telerik controls as well)

You can define two types of RadNavigation templates:

1. Global Templates - template that is automatically applied to all items: 

      <telerik:RadNavigation ID="RadNavigation1" runat="server">


             <NodeTemplate>


                   ... 


             </NodeTemplate>


   
      </telerik:RadNavigation>

2. Per-node Template - template that overrides the global template on a node basis. 

     <telerik:RadNavigation ID="RadNavigation1" runat="server">


        <telerik:RadNavigationNode Text="Node">


            <NodeTemplate>


                   ...


            <NodeTemplate>


        </telerik:RadNavigationNode>


     </telerik:RadNavigation>

3. Per-node ContentTemplate - content template. 

     <telerik:RadNavigation ID="RadNavigation1" runat="server">


        <telerik:RadNavigationNode Text="Node">


            <ContentTemplate>


                   ...


            <ContentTemplate>


        </telerik:RadNavigationNode>


     </telerik:RadNavigation>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Functionality_Server_side_Templates_Item_Templates_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadNavigation ID="RadNaivation1" runat="server" MenuButtonPosition="Left" >
            <Nodes>
                <telerik:NavigationNode Text="Searchbox" runat="server" CssClass="searchBoxWrapper rootTemplate">
                    <NodeTemplate>
                        <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server"></telerik:RadSearchBox>
                    </NodeTemplate>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Profile" runat="server" CssClass="accountWrapper rootTemplate">
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Fashion" runat="server">
                    <ContentTemplate>
                        <div class="column">
                            <h5>WHAT'S HOT</h5>
                            <telerik:RadSiteMap runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="The Summer Guide" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Footwear Trends" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Holiday Shop" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                            <h5>TOP CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Women's" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Men's" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Kids" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <div class="column">
                            <h5>OTHER CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap2" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Clothing" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Shoes" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Handbags & Accessories" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Jewery & Watches" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Sales & Events" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <img src="images/fashion.jpg" alt="fashion" />
                    </ContentTemplate>
                </telerik:NavigationNode>
                <telerik:NavigationNode ID="NavigationNode1" Text="Electronics" runat="server">
                    <ContentTemplate>
                        <div class="column">
                            <h5>WHAT'S HOT</h5>
                            <telerik:RadSiteMap ID="RadSiteMap3" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Apple" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Samsung" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Canon" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                            <h5>TOP CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Cell Phones" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Cameras & Photo" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Computers & Tablets" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <div class="column">
                            <h5>OTHER CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap2" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Vehicle Electronics" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="GPS" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="TV & Audio" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Surveillance" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Video Games & Consoles" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <img src="images/electronics.jpg" alt="electronics" />
                    </ContentTemplate>
                </telerik:NavigationNode>
                <telerik:NavigationNode ID="NavigationNode2" Text="Interior" runat="server">
                    <ContentTemplate>
                        <div class="column">
                            <h5>WHAT'S HOT</h5>
                            <telerik:RadSiteMap ID="RadSiteMap4" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Bath" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Bedding" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Kitchen, Dining & Bar" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                            <h5>TOP CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Furniture" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Household Supplies" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Pet Supplies" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <div class="column">
                            <h5>OTHER CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap2" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Crafts" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Home Decor" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Rugs & Carpets" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Lamps, Lighting" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Window Treatment" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <img src="images/garden.jpg" alt="garden" />
                    </ContentTemplate>
                </telerik:NavigationNode>
                <telerik:NavigationNode ID="NavigationNode3" Text="Beauty" runat="server">
                    <ContentTemplate>
                        <div class="column">
                            <h5>WHAT'S HOT</h5>
                            <telerik:RadSiteMap ID="RadSiteMap5" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Sun Cream & Aftersun" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="All Haircare" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Fake Tan" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                            <h5>TOP CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Eyes" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Face" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Lips" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <div class="column">
                            <h5>OTHER CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap2" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Bath & Shower Gel" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Deodorant & Spray" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Soap & Handwash" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Beauty Gifts" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Hand & Nail" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <img src="images/beauty.jpg" alt="beauty" />
                    </ContentTemplate>
                </telerik:NavigationNode>
                <telerik:NavigationNode ID="NavigationNode4" Text="Sports" runat="server">
                    <ContentTemplate>
                        <div class="column">
                            <h5>WHAT'S HOT</h5>
                            <telerik:RadSiteMap ID="RadSiteMap6" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Team Sports" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Outdoor Games" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Water Sports" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                            <h5>TOP CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Winter Sports" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Fitness, Running & Yoga" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Hunting" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <div class="column">
                            <h5>OTHER CATEGORIES</h5>
                            <telerik:RadSiteMap ID="RadSiteMap2" runat="server">
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Fishing" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Cycling" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Golf" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Tennis & Rocquet Sports" NavigateUrl="#"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Boxing & MMA" NavigateUrl="#"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </div>
                        <img src="images/sports.jpg" alt="sports" />
                    </ContentTemplate>
                </telerik:NavigationNode>
            </Nodes>
        </telerik:RadNavigation>

        <h4>STEP UP YOUR GAME</h4>
        <img src="images/home-bottom.jpg" alt="Step up your game" class="home-bg" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance