Kendo UI for jQuery Drawer Overview

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

Kendo UI for jQuery Kendoka image

The Drawer is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the Drawer

You can initialize a Drawer by using an HTML element and a template or with MVVM.


You can create a Kendo UI Drawer by using an HTML element and a template.

    <div id="overlay-drawer"></div>
    <button class="k-button k-primary" onclick="show()">Show</button>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum doloribus illum earum itaque, numquam nesciunt voluptas officiis ullam aperiam enim optio facilis deleniti, ea mollitia esse, minima. Dolorum, consequuntur deserunt!
    <script id="drawer-template" type="text/x-kendo-template">
            <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-separator'></li>
            <li data-role='drawer-item'>Third Item</li>

      var drawer = $("#overlay-drawer").kendoDrawer({
        template: $("#drawer-template").html(),

      function show(e) {;


The following example demonstrates how to initialize a Drawer with MVVM.

    <div id="example">
      <div data-role="drawer"
           data-template="<ul><li data-role='drawer-item'><span>First Item</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span>Second Item</span></li><li data-role='drawer-item' class='k-selected'><span>Third Item</span></li></ul>">
        <h1 class="my-content">Swipe or drag me to the right <span class="k-icon k-i-arrow-chevron-right"></span></h1>
      var viewModel = kendo.observable({});
      kendo.bind($("#example"), viewModel);
      .k-i-arrow-chevron-right {
        font-size:  2em;

      .my-content {
        height: 200px;

Functionality and Features

See Also

In this article