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

Items

configuration

An array with objects representing the appbar items.

items

Array

<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<h1>This is just a text</h1>"
        },
    ]
});
</script>

items.className

String

Defines a set CSS classes for the item.

<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            className: "k-first k-one",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<h1>This is just a text</h1>"
        },
    ]
});
</script>

items.template

String|Function

The template which renders as content for the appbar item. Valid only for the contentItem type

<script id="first" type="text/x-kendo-template">
<input />
</script>
<script id="second" type="text/x-kendo-template">
    <h3>B</h3>
</script>
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: kendo.template($("#first").html())
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: kendo.template($("#second").html())
        },
    ]
});
</script>

<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<h1>This is just a text</h1>"
        },
    ]
});
</script>

items.type

String

A value determining the type of the item. Valid options are

spacer: creates a span which to add space between the items.
contentItem: creates an item using a specific template provided for it.

<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<h1>This is just a text</h1>"
        },
    ]
});
</script>

items.width

String|Number

Determines the width of the item. Valid only for the spacer items. Numeric values are treated as pixels.

<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer",
            width: 60
        },
        {
            type: "contentItem",
            template: "<h1>This is just a text</h1>"
        },
    ]
});
</script>