---
title: "Custom toolbar split button"
description: "This example shows you how to add a simple split menu button to TinyMCE's toolbar."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/custom-split-toolbar-button/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/custom-split-toolbar-button/index.md"
version: "5"
last_updated: "2024-04-09T09:35:32Z"
tokens: 328
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/custom-split-toolbar-button/).
# Custom toolbar split button

This example shows you how to add a simple "split" menu button to TinyMCE’s toolbar.

**Example**

```js
tinymce.init({
  selector: 'textarea#custom-toolbar-split-button',
  toolbar: 'myButton',
  menubar: false,
  setup: function (editor) {
    editor.ui.registry.addSplitButton('myButton', {
      text: 'My Button',
      icon: 'info',
      tooltip: 'This is an example split-button',
      onAction: function () {
        editor.insertContent('<p>You clicked the main button</p>');
      },
      onItemAction: function (api, value) {
        editor.insertContent(value);
      },
      fetch: function (callback) {
        var items = [
          {
            type: 'choiceitem',
            icon: 'notice',
            text: 'Menu item 1',
            value: '&nbsp;<em>You clicked menu item 1!</em>'
          },
          {
            type: 'choiceitem',
            icon: 'warning',
            text: 'Menu item 2',
            value: '&nbsp;<em>You clicked menu item 2!</em>'
          }
        ];
        callback(items);
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
```