items.menuButtons Array

Specifies the menu buttons of a SplitButton or a DropDownButton.

Example

<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>

Example - DropDownButton

<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.

Example

<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.

Example

<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 (default: false)

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

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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>