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

Items

configuration

Specifies the items rendered by the Drawer when the top-level template option is not set. Each item can define text, icon, state, custom attributes, per-item template functions, and nested child items through items.items. If template is configured, it takes precedence and the items configuration is ignored.

items

Array

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        position: "left",
        items: [
            { text: "Home", icon: "home", selected: true },
            { text: "Reports", icon: "chart-bar" },
            { separator: true },
            {
                text: "Settings",
                icon: "gear",
                items: [
                    { text: "Profile", icon: "user" },
                    { text: "Notifications", icon: "bell" }
                ]
            }
        ]
    });
</script>

items.attr

Object

Defines custom HTML attributes of the generated item element.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            {
                text: "Reports",
                icon: "chart-bar",
                attr: {
                    "data-section": "reports",
                    "title": "Open Reports"
                }
            },
            { text: "Users", icon: "user" }
        ]
    });
</script>

items.cssClass

String

Defines the class names of the generated item element.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Priority", icon: "star", cssClass: "priority-item" },
            { text: "Standard", icon: "home" }
        ]
    });
</script>

items.enabled

Boolean

Toggles the enabled state of the item.

Default: true

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Projects", icon: "folder" },
            { text: "Billing", icon: "dollar", enabled: false },
            { text: "Support", icon: "question-circle" }
        ]
    });
</script>

items.expanded

Boolean

Toggles the initial expanded state of the item. When set to true, the item starts expanded and its child items are visible. Clicking a parent item toggles expand and collapse regardless of this setting.

Default: false

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        expanded: true,
        mode: "push",
        items: [
            {
                text: "Management",
                icon: "folder",
                expanded: true,
                items: [
                    { text: "Team", icon: "user" },
                    { text: "Projects", icon: "home" }
                ]
            },
            { text: "Help", icon: "question-circle" }
        ]
    });
</script>

items.icon

String

Defines the name for an existing icon in a Kendo UI theme.

See web font icons help article for more details on Kendo UI icons.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Dashboard", icon: "home" },
            { text: "Files", icon: "folder" },
            { text: "Preferences", icon: "gear" }
        ]
    });
</script>

items.items

Array

Specifies nested child items. The Drawer renders child items recursively by using the same item configuration surface.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        expanded: true,
        mode: "push",
        items: [
            {
                text: "Management",
                icon: "folder",
                items: [
                    { text: "Team", icon: "user" },
                    { text: "Projects", icon: "home", selected: true }
                ]
            },
            { text: "Help", icon: "question-circle" }
        ]
    });
</script>

items.miniTemplate

Function

Sets a custom template function for the item in mini mode. The implemented items surface supports function values only. The function must return the item markup used while the Drawer is collapsed in mini mode. If mini.template is configured, it takes precedence over items.miniTemplate.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        mini: {
            width: 60
        },
        items: [
            {
                text: "Inbox",
                icon: "inbox",
                miniTemplate: function(item) {
                    return "<li data-role='drawer-item' title='" + kendo.htmlEncode(item.text) + "'>" +
                        kendo.ui.icon({ icon: item.icon }) +
                        "</li>";
                }
            },
            { text: "Archive", icon: "folder" }
        ]
    });
</script>

items.selected

Boolean

Toggles the selected state of the item.

Default: false

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Overview", icon: "home" },
            { text: "Profile", icon: "user", selected: true },
            { text: "Security", icon: "lock" }
        ]
    });
</script>

items.separator

Boolean

Defines a separator item. When set to true, the Drawer renders a separator instead of a clickable item.

Default: false

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Overview", icon: "home" },
            { separator: true },
            { text: "Administration", icon: "gear" }
        ]
    });
</script>

items.template

Function

Sets a custom template function for the item. The implemented items surface supports function values only. The function must return the item markup. If the top-level template option is configured, it takes precedence over items and per-item templates are not used.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            {
                text: "Profile",
                icon: "user",
                template: function(item) {
                    return "<li data-role='drawer-item'>" +
                        kendo.ui.icon({ icon: item.icon }) +
                        "<span class='k-item-text'>" + kendo.htmlEncode(item.text) + "</span>" +
                        "</li>";
                }
            },
            { text: "Preferences", icon: "gear" }
        ]
    });
</script>

items.text

String

Defines the text of the item. If not set, the generated item renders no text.

<div id="drawer">
    <div>Content area content.</div>
</div>
<script>
    $("#drawer").kendoDrawer({
        mode: "push",
        items: [
            { text: "Inbox", icon: "inbox" },
            { text: "Archive", icon: "folder" }
        ]
    });
</script>