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

Items

configuration

Specifies the menu buttons of the DropDownButton.

items

Array

<button id="dropdownbutton" type="button">Button</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { id: "item1", text: "Item1", click: function(ev){alert("Item 1 clicked!");} },
            { id: "item2", text: "Item2", icon: "gear", attributes: { "data-context": "some arbitrary data" }},
            { id: "item3", text: "Item3", imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"},
            { id: "item4", text: "Item4" },
            { id: "item5", text: "Item5", enabled: false },
            { id: "item6", text: "Item6", hidden: true  }
        ],
    });
</script>

items.attributes

Object

Adds custom attributes to the LI element of the menu button.

<button id="dropdownbutton" type="button">Actions</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            {
                text: "Save",
                attributes: {
                    "data-action": "save",
                    "data-priority": "high",
                    "title": "Save the current document"
                }
            },
            {
                text: "Export",
                attributes: {
                    "data-action": "export",
                    "class": "export-item"
                }
            }
        ]
    });
</script>

items.click

Function

Adds unique click callback for the menu item.

<button id="dropdownbutton" type="button">File</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            {
                text: "New",
                click: function(e) {
                    console.log("New file clicked");
                    alert("Creating new file...");
                }
            },
            {
                text: "Open",
                click: function(e) {
                    console.log("Open file clicked", e);
                    alert("Opening file dialog...");
                }
            },
            {
                text: "Save",
                click: function(e) {
                    console.log("Save clicked", e.item);
                    alert("File saved successfully!");
                }
            }
        ]
    });
</script>

items.data

Function

Adds a custom data callback to be added to the context of menu item - useful to attach context dynamically.

<button id="dropDownButton">Command</button>
<script>

    var commands = {
        "command_one": function () {
            alert("Command One Executed!")
        },
        "command_two": function () {
            alert("Command Two Executed!")
        },
        "default_command": function () {
            alert("Default Executed!")
        }
    }

    function getContext(item) {
        return {
            command: commands[item.id]
        }
    }

    var dropDownButton = $("#dropDownButton").kendoDropDownButton({
        items: [
            { id: "command_one", text: "Command 1", data: getContext},
            { id: "command_two", text: "Command 2", data: getContext}
        ],
        click: function(ev) {
            if (ev.target.data("command")) {
                ev.target.data("command")();
            } else {
                commands["default_command"]();
            }
        }
    }).data("kendoDropDownButton");
</script>

items.enabled

Boolean

Toggles the enabled state of the item.

Default: true

<button id="dropdownbutton" type="button">Actions</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Edit", enabled: true },
            { text: "Delete", enabled: false },  // This item will be disabled
            { text: "Copy", enabled: true },
            { text: "Archive", enabled: false }  // This item will be disabled
        ]
    });
</script>

items.hidden

Boolean

Indicates wether the item should hidden.

Default: false

<button id="dropdownbutton" type="button">View</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Show Details", hidden: false },  // This item will be visible
            { text: "Advanced Options", hidden: true },  // This item will be hidden
            { text: "Export", hidden: false },
            { text: "Debug Mode", hidden: true }  // This item will be hidden
        ]
    });
</script>

items.icon

String

Specifies the icon of the item.

<button id="dropdownbutton" type="button">Tools</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Settings", icon: "gear" },
            { text: "Save", icon: "save" },
            { text: "Print", icon: "print" },
            { text: "Email", icon: "email" }
        ]
    });
</script>

items.id

String

Specifies the id of the item.

<button id="dropdownbutton" type="button">Actions</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { id: "new-item", text: "New" },
            { id: "edit-item", text: "Edit" },
            { id: "delete-item", text: "Delete" },
            { id: "duplicate-item", text: "Duplicate" }
        ]
    });

    // Later you can access items by their id
    var dropdownbutton = $("#dropdownbutton").data("kendoDropDownButton");
    console.log("Item with id 'edit-item':", dropdownbutton.items().filter('[data-id="edit-item"]'));
</script>

items.imageUrl

String

Specifies the image of the item.

<button id="dropdownbutton" type="button">Social</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            {
                text: "Image",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"
            },
            {
                text: "Video",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/16/video.png"
            },
            {
                text: "Volume",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/16/speaker.png"
            }
        ]
    });
</script>

items.spriteCssClass

String

Specifies custom css class added to the sprite icon element of the item.

<style>
    .custom-icon { width: 16px; height: 16px; background-color: #ff6358; }
    .warning-icon { width: 16px; height: 16px; background-color: #ffa500; }
    .success-icon { width: 16px; height: 16px; background-color: #28a745; }
</style>
<button id="dropdownbutton" type="button">Status</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Error", spriteCssClass: "custom-icon" },
            { text: "Warning", spriteCssClass: "warning-icon" },
            { text: "Success", spriteCssClass: "success-icon" }
        ]
    });
</script>

items.text

String

Specifies the text of the item.

<button id="dropdownbutton" type="button">Choose Language</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "English" },
            { text: "Español" },
            { text: "Français" },
            { text: "Deutsch" },
            { text: "日本語" }
        ]
    });
</script>

items.url

String

Specifies the url of the item - it will render a element and will navigate the browser on click.

<button id="dropdownbutton" type="button">Quick Links</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Google", url: "https://www.google.com" },
            { text: "Kendo UI Demos", url: "https://demos.telerik.com/kendo-ui/" },
            { text: "Documentation", url: "https://docs.telerik.com/kendo-ui/" },
            { text: "Support", url: "https://www.telerik.com/support/kendo-ui" }
        ]
    });
</script>