# SplitButton Customization

The SplitButton provides options for customizing the behavior of its popup and the rendering of its popup items. The popup displays the items from the [`items`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#items) property. For details on binding strings or objects, see [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/data-binding).

The component enables you to:

* [Configure popup behavior](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/customization#popup-behavior)
* [Customize popup item content](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/customization#item-templates)

## Popup Behavior

To open or close the popup programmatically, set [`opened`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#opened). The [`animate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonspopupsettings#animate) setting controls the popup animation. Use [`popupClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonspopupsettings#popupclass) to apply CSS classes to the popup. Set [`anchorAlign`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonspopupsettings#anchoralign) and [`popupAlign`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonspopupsettings#popupalign) to adjust popup positioning.

The following demo disables the popup animation and applies a custom CSS class.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/splitbutton/customization/popup/source.txt)

## Item Templates

The SplitButton lets you override how its popup items are rendered. By default, each popup item displays its icon, image, and text. To replace the content of all items with a component, set the [`item`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#item) property. For callback-based or component-based rendering, use [`itemRender`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#itemRender). To customize only one item, set its [`render`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttoniteminterface#render) field in an [`items`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#items) object.

The following demo uses `itemRender` to customize every popup item.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/splitbutton/customization/items/source.txt)

## Suggested Links

* [SplitButton Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/appearance)
* [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/data-binding)
* [API Reference of the SplitButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops)