# 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 [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#data) input. For details on binding primitive and object arrays, see [Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/splitbutton/data-binding).

The component enables you to:

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

## Popup Behavior

Call [`toggle`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#toggle) with `true` to open or `false` to close the popup programmatically. Calling `toggle` does not fire the [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#open) or [`close`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#close) events.

Set [`popupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#popupsettings) to configure the popup. The input supports these options:

* [`animate`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/popupsettings#animate) enables or disables the popup animation. Open and close animations are enabled by default.
* [`popupClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/popupsettings#popupclass) applies CSS classes to the popup.
* [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/popupsettings#align) sets horizontal alignment to `left`, `center`, or `right`. The popup defaults to the left in left-to-right layouts and to the right in right-to-left layouts.
* [`appendTo`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/popupsettings#appendto) selects the popup container: `root` (default), `component`, or a `ViewContainerRef`.

The following demo sets a CSS class on the popup and enables its animation.

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

## Item Templates

To define a template for every popup item, nest an `<ng-template>` with the [`kendoSplitButtonItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttonitemtemplatedirective) directive inside the SplitButton. The same template renders every item, and `let-dataItem` gives you access to the current data item.

The following demo renders each popup item in italics.

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

## Suggested Links

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