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

Items.menuButtons

configuration

Specifies the menu buttons of a SplitButton or a DropDownButton.

items.menuButtons

Array

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [ {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        } ]
    });
</script>

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [ {
            type: "dropDownButton",
            text: "dropDownButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        } ]
    });
</script>

items.menuButtons.attributes

Object

Specifies the HTML attributes of a menu button.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            id: "hello",
            text: "Insert",
            attributes: { "class": "red" },
            menuButtons: [
                { text: "Insert above", icon: "insert-top", attributes: { "class": "blue" } },
                { text: "Insert between", icon: "insert-middle" },
                { text: "Insert below", icon: "insert-bottom" }
            ]
        }
        ]
    });
</script>
<style>
    .red { background-color: red; }
    .blue { color: blue; }
</style>

items.menuButtons.enable

Boolean

Specifies whether the menu button is initially enabled or disabled.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo", enable: false },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        }
        ]
    });
</script>

items.menuButtons.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "splitButton",
      text: "MyButton",
      menuButtons: [
        { text: "foo" },
        { text: "bar" },
        { text: "baz", hidden: true }
      ]
    }
  ]
});
</script>

items.menuButtons.icon

String

Sets icon for the menu buttons. The icon should be one of the existing in the Kendo UI theme sprite.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo", icon: "check" },
                { id: "bar", text: "Bar", icon: "info-circle" },
                { id: "baz", text: "Baz", icon: "clock" }
            ]
        }
        ]
    });
</script>

items.menuButtons.id

String

Specifies the ID of the menu buttons.

By design the widget will render two buttons - the one located in the ToolBar container will receive the specified ID, the one located in the Overflow Popup container will receive the specified ID but with _overflow suffix. If the ID will be used for determining which button is clicked in the click or toggle event handler, the developer should use the ID property of the event data which always contains the specified ID without suffix.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [ {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        } ]
    });
</script>

items.menuButtons.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the menu button.

<div id="toolbar"></div>

<script>
    var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo", imageUrl:baseUrl + "/sports/snowboarding.png" },
                { id: "bar", text: "Bar", imageUrl:baseUrl + "/sports/snowboarding.png" }
            ]
        }
        ]
    });
</script>

items.menuButtons.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for menu button icon.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo", spriteCssClass: "foo" },
                { id: "bar", text: "Bar", spriteCssClass: "bar" },
                { id: "baz", text: "Baz", spriteCssClass: "baz" }
            ]
        }
        ]
    });
</script>

items.menuButtons.text

String

Specifies the text of the menu buttons.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        }
        ]
    });
</script>

items.menuButtons.url

String

Specifies the url of the menu button to navigate to.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Telerik", url: "https://www.telerik.com" },
                { id: "bar", text: "Google", url: "https://www.google.com" }
            ]
        }
        ]
    });
</script>