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

How to apply Navigation Urls to RadDrawer


Product RadDrawer for ASP.NET AJAX


The how-to article shows how to navigate to another page after clicking on a drawer item similar to the NavigateUrl functionality of RadMenu.


RadDrawer is a light-weight control based on the Kendo UI drawer widget and you can implement the navigation functionality, by adding <a> tags inside its ItemsTemplate, e.g.

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
        .RadDrawer .k-drawer-items {
            padding: 0 8px;
            line-height: 2em;
<body onload="showDrawer();">
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
            function showDrawer(sender, args) {
                var drawer = $find("<%= OverlayDrawer.ClientID %>");

        <telerik:RadDrawer runat="server" ID="OverlayDrawer"
            Position="left" Mode="Push"
                <li style='display:block; padding: 0 8px;'><a href='' style='display:block;width:100%;text-decoration:none;color:black;'>Telerik Website</a></li>
                <li style='display:block; padding: 0 8px;'><a href='' style='display:block;width:100%;text-decoration:none;color:black;'>Demos</a></li>
                <li style='display:block; padding: 0 8px;'><a href='' style='display:block;width:100%;text-decoration:none;color:black;'>Documentation</a></li>
In this article