# Getting Started with the Telerik WebForms Drawer

The following tutorial demonstrates how you can add the **RadDrawer** control. The end result will be similar to **Figure 1**:

> caption Figure 1: RadDrawer

![webforms-drawer-getting-started](https://www.telerik.com/products/aspnet-ajax/documentation/assets/4de13d844a51213e1f74572ca142f34b/drawer-getting-started.gif "drawer-getting-started")

1. Add a **ScriptManager** control on a Web Form.

2. Add a **RadDrawer** control to the page, and set its properties:

   * `Mode` - sets the mode of the RadDrawer to Push/Overlay.
   * `SwipeToOpen` - enables/disables the swipe gestures for toggling the RadDrawer.
   * `DrawerWidth` - sets the width of the RadDrawer items container.
   * `ContentTemplate` - sets the content of the RadDrawer.
   * `ItemsTemplate` - gets a hierarchical HTML structure that would represent the RadDrawer items.

The end result should be similar to the following:

```ASP.NET

<telerik:RadDrawer runat="server" ID="RadDrawer1" Mode="push" DrawerWidth="200" SwipeToOpen="true">
    <ContentTemplate>
        <p style="user-select: none">
            This is the content element containg the text.
        </p>
        <p style="user-select: none">
            Swipe/Drag the mouse to the right to open the RadDrawer
        </p>
    </ContentTemplate>
    <ItemsTemplate>
        <ul> 
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-item-text'>First Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Second Item</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Third Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Fourth Item</span>
            </li> 
        </ul>
    </ItemsTemplate>
</telerik:RadDrawer>

```

Next, you can check the [Functionality](https://www.telerik.com/products/aspnet-ajax/documentation/controls/drawer/functionality/overview) of the RadDrawer and [how to handle the RadDrawer interactions](https://www.telerik.com/products/aspnet-ajax/documentation/controls/drawer/client-side-programming/overview).