New to Kendo UI for jQuery? Start a free 30-day trial

Mode

configuration

Determines how the Kendo UI Drawer will interact with the associated content. The default one (overlay) will simply overlap the associated content with overlay effect. On the other hand "push" mode will show the drawer next to associated cotent. The associated content will shrink its content.

mode

String

Default: 'overlay'

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $(document).ready(function() {
        var drawerInstance = $("#drawer").kendoDrawer({
            mode: "push",
            template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-x-logo'></span><span class='item-text'>item 2</span></li></ul>`,
            position: 'left'
        }).data("kendoDrawer");

        drawerInstance.show();
    });
</script>