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

Mini

configuration

Enables or configures the mini mode for the Kendo UI Drawer. This is a compact view that is displayed when the Kendo UI Drawer is collapsed. Usually it used to show only the icons when the drawer content contains icon and text for an item. When set to true it uses the main template.

mini

Boolean | Object

<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',
            mini: true
        }).data("kendoDrawer");
    });
</script>

mini.template

String | Function

Defines a specific template for the Kendo UI Drawer when in mini mode. When configured, it takes precedence over items.miniTemplate.

<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',
            mini: {
                width: 45,
                template: handler
            }
        }).data("kendoDrawer");
    });

    function handler() {
        return `<ul>
            <li data-role='drawer-item'>
                ${generateIcon('anchor')}
            </li>
            <li data-role='drawer-item'>
                ${generateIcon('info-circle')}
            </li>
        </ul>`
    }

    function generateIcon(iconName){
        return kendo.ui.icon(iconName);
    }
</script>

mini.width

Number

Defines a specific width for the Kendo UI Drawer when in mini 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'></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',
            mini: {
                width: 45
            }
        }).data("kendoDrawer");
    });
</script>