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

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

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>
<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