SplitButton Customization

Updated on Nov 9, 2026

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 input. For details on binding primitive and object arrays, see Data Binding.

The component enables you to:

• Configure popup behavior
• Customize popup item content

Popup Behavior

Call toggle with true to open or false to close the popup programmatically. Calling toggle does not fire the open or close events.

Set popupSettings to configure the popup. The input supports these options:

• animate enables or disables the popup animation. Open and close animations are enabled by default.
• popupClass applies CSS classes to the popup.
• 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 selects the popup container: root (default), component, or a ViewContainerRef.

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

Example

View Source

Loading ...

Item Templates

To define a template for every popup item, nest an <ng-template> with the kendoSplitButtonItemTemplate 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.

Example

View Source

Loading ...

Suggested Links

• SplitButton Appearance
• Data Binding
• API Reference of the SplitButton