# ImageStyleDropdownDefinition

interface

#### **The image style custom drop-down definition descriptor**

This definition can be implemented in the [image toolbar configuration](module_image_imageconfig-ImageConfig.md#member-toolbar) to define a completely custom drop-down in the image toolbar.

```typescript
ClassicEditor.create( {
	image: { toolbar: [
			// One of the predefined drop-downs
			'imageStyle:wrapText',
		// Custom drop-down
		{
			name: 'imageStyle:customDropdown',
			title: Custom drop-down title,
			items: [ 'imageStyle:alignLeft', 'imageStyle:alignRight' ],
			defaultItem: 'imageStyle:alignLeft'
		}
	] }
} );
```

**Note:** At the moment it is possible to populate the custom drop-down with only the buttons registered by the `ImageStyle` plugin.

The defined drop-down will be registered as the [`DropdownView`](module_ui_dropdown_dropdownview-DropdownView.md) with the [`SplitButtonView`](module_ui_dropdown_button_splitbuttonview-SplitButtonView.md) under the provided name in the [`ComponentFactory`](module_ui_componentfactory-ComponentFactory.md)

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L570)

<a id="properties">

## Properties

<a id="member-defaultItem">

### `defaultItem: string`

defaultItem The name of one of the buttons from the items list, which will be used as a default button for the drop-down's split button.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L599)

<a id="member-items">

### `items: Array<string>`

The list of the names of the buttons that will be placed in the drop-down's toolbar. Each of the buttons has to be one of the [default image style buttons](module_image_imageconfig-ImageConfig.md#member-styles) or to be defined as the [image styling option](module_image_imageconfig-ImageStyleOptionDefinition.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L593)

<a id="member-name">

### `name: string`

The unique name of the drop-down. It is recommended to precede it with the "imageStyle:" prefix to avoid collision with the components' names registered by other plugins.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L576)

<a id="member-title">

### `title?: string`

The drop-down's title. It will be used as the split button label along with the title of the default item in the following manner: "Custom drop-down title: Default item title".

Setting `title` to one of [`localizedDefaultStylesTitles`](module_image_imagestyle_imagestyleui-ImageStyleUI.md#member-localizedDefaultStylesTitles) will automatically translate it to the language of the editor.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L586)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)