# ASP.NET Core Drawer Overview

The Telerik UI Drawer TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Drawer widget.

The Drawer is a dismissible panel used for navigation in responsive web applications or changing the content of a section on a specific page.

* [Demo page for the Drawer HtmlHelper](https://demos.telerik.com/aspnet-core/drawer/index)

* [Demo page for the Drawer TagHelper](https://demos.telerik.com/aspnet-core/drawer/index)

## Initializing the Drawer

The following example demonstrates how to define the Drawer.

```Razor HtmlHelper
    @(Html.Kendo().Drawer()
        .Name("drawer")
        .Template(@"<ul>
                <li data-role='drawer-item'>First Item</li>
                <li data-role='drawer-separator'></li>
                <li data-role='drawer-item'>Second Item</li>
                <li data-role='drawer-item' class='k-selected'>Third Item</li>
            </ul>")
        .Mode("push")
        .Position("left")
        .SwipeToOpen(true)
        .Content(@"<div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>")
    )
```

```Razor TagHelper
    <kendo-drawer name="drawer"
                template-id="template"
                mode="push"
                position="left"
                swipe-to-open="true">
        <content>
            <div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>
        </content>
    </kendo-drawer>
```

```JS Template
    <script id="template" type="text/x-kendo-template">
        <ul>
            <li data-role='drawer-item'>First Item</li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'>Second Item</li>
            <li data-role='drawer-item' class='k-selected'>Third Item</li>
        </ul>
```

## Functionality and Features

* [Display modes](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/display-modes)—The component provides three display modes that allow you to control how the Drawer is displayed on the screen.
* [Interaction modes](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/interaction-modes)—The Drawer supports the `overlay` and `push` interaction modes, and you can determine if it will be rendered on left or right side.
* [Items](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/items)—The Drawer allows you to populate its navigation from a data array.
* [Templates](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/templates)—With the built-in item templates, you control how the Drawer items are rendered.
* [Hierarchy](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/hierarchy)—The Drawer allows you to display hierarchically organized items.
* [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/events)—The Drawer allows you to handle its events and implement custom functionality.
* **Expanded**—The Drawer can be expanded by default using this setting.

## Next Steps

* [Getting Started with the Drawer](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/getting-started)

* [Basic Usage of the Drawer HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/drawer/index)

* [Drawer in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/drawer/razor-page)

## See Also

* [Using the API of the Drawer for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/drawer/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)