Navigation - Right-to-left Support

  • TV Channels
    • CNN
    • NBC
    • ABC
  • Sports
    • Us Sports
      • Baseball
      • Basketball
      • Football
    • European Sports
      • Soccer
      • Volleyball
      • Tennis
  • Events
    • Oscar Awards
    • MTV Movie Awards
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo shows how you can use the RadNavigation control for RTL languages.

The control takes into consideration the direction attribute set to the control itself or any parent HTML element. If you set the direction of the body tag (or any other parent element that contains the control) to rtl, RadNavigation reverses the item order and aligns itself to the right side of the container.

<telerik:RadNavigation ID="RadNavigation1" runat="server" dir="rtl" ... />
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Accessibility_and_Internationalization_RightToLeft_DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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 size-narrow">
        <telerik:RadNavigation ID="RadNaivation1" runat="server" TabIndex="1" dir="rtl">
            <Nodes>
                <telerik:NavigationNode Text="TV Channels">
                    <Nodes>
                        <telerik:NavigationNode Text="CNN"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="NBC"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="ABC"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Sports">
                    <Nodes>
                        <telerik:NavigationNode Text="Us Sports">
                            <Nodes>
                                <telerik:NavigationNode Text="Baseball"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Basketball"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Football"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="European Sports">
                            <Nodes>
                                <telerik:NavigationNode Text="Soccer"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Volleyball"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Tennis"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode ID="NavigationNode3" Text="Events" runat="server">
                    <Nodes>
                        <telerik:NavigationNode Text="Oscar Awards"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="MTV Movie Awards"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
            </Nodes>
        </telerik:RadNavigation>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?