# DropDownButton Customization

The DropDownButton provides options for setting the behavior of its popup and popup items. The popup displays the items from the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent#data) input. For details on binding primitive and object arrays, see [Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/dropdownbutton/data-binding).

The component enables you to:

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

## Popup Behavior

To open or close the popup programmatically, use the [`toggle`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent#toggle) method. Calling `toggle` does not fire the [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent#open) or [`close`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent#close) events.

Set [`popupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent#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/dropdownbutton/items/popup/source.txt)

## Item Templates

To define a template for every popup item, nest an `<ng-template>` with the [`kendoDropDownButtonItemTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttonitemtemplatedirective) directive inside the DropDownButton. Use `let-dataItem` to access the current data item in the template.

The following demo renders an SVG icon and label for each item.

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

## Suggested Links

* [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/dropdownbutton/appearance)
* [Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/dropdownbutton/data-binding)
* [API Reference of the DropDownButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/dropdownbuttoncomponent)
* [Angular DropDown Button](https://www.telerik.com/kendo-angular-ui/dropdownbutton)