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

Separators

  • Home
  • Products
    • Product A
    • Product B
    • Product C
  • About
  • Contact Us
    • Address 1
    • Address 2

As of 2025 Q2, the navigation layout can be customized through separators. Use separators for grouping nodes into two or more categories. You can also use them to achieve cosmetic effects such as visual dividers between navigation sections.

To set a given navigation node as a separator, set its IsSeparator property to True. Separator nodes render as empty elements with a visible line - vertical between horizontal root nodes and horizontal between vertical child nodes. Separator nodes do not respond to user clicks, cannot be selected or focused, and are skipped during keyboard navigation.

The example below shows a navigation control with two separator nodes: one between the horizontally flowing root nodes, and one between the vertically flowing child nodes:

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="Navigation_Functionality_Separators_DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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">
        <div class="demo-container size-narrow center">
            <telerik:RadNavigation ID="RadNavigation1" runat="server">
                <Nodes>
                    <telerik:NavigationNode Text="Home" />
                    <telerik:NavigationNode IsSeparator="true" />
                    <telerik:NavigationNode Text="Products">
                        <Nodes>
                            <telerik:NavigationNode Text="Product A" />
                            <telerik:NavigationNode IsSeparator="true" />
                            <telerik:NavigationNode Text="Product B" />
                            <telerik:NavigationNode Text="Product C" />
                        </Nodes>
                    </telerik:NavigationNode>
                    <telerik:NavigationNode IsSeparator="true" />
                    <telerik:NavigationNode Text="About" />
                    <telerik:NavigationNode IsSeparator="true" />
                    <telerik:NavigationNode Text="Contact Us">
                        <Nodes>
                            <telerik:NavigationNode Text="Address 1" />
                            <telerik:NavigationNode IsSeparator="true" />
                            <telerik:NavigationNode Text="Address 2" />
                        </Nodes>
                    </telerik:NavigationNode>
                </Nodes>
            </telerik:RadNavigation>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance