mode String (default: 'overlay')

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.

Push mode

<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-outline'></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-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
            position: 'left'
        }).data("kendoDrawer");

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