---
title: "Creating custom menu items"
description: "This section demonstrates different types of menu items."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/creating-custom-menu-items/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/creating-custom-menu-items/index.md"
version: "latest"
last_updated: "2022-03-30T07:08:51Z"
tokens: 721
---
# Creating custom menu items

## Use Cases

- Create a shortcut for an action or a series of actions that the user repeatedly does.
- Create a button for custom behavior.

## How to create custom menu items

The methods for adding custom menu items are in the UI Registry part of the editor API editor.ui.registry. The API has three methods for adding menu items:

- `editor.ui.registry.addMenuItem(identifier, configuration)`
- `editor.ui.registry.addNestedMenuItem(identifier, configuration)`
- `editor.ui.registry.addToggleMenuItem(identifier, configuration)`
The two arguments these methods take are:

- `identifier` - a unique name for the button
- `configuration` - an object containing your configuration for that button.
Define the custom toolbar button with the `setup` callback of the TinyMCE configuration to add it to the editor. This callback is invoked automatically for every initialized editor instance. Access to the UI registry API occurs when the callback receives a reference to the editor instance as its argument.

### Example of adding a custom menu item

```js
tinymce.init({
  selector: '#editor',
  menu: {
    custom: { title: 'Custom Menu', items: 'undo redo myCustomMenuItem' }
  },
  menubar: 'file edit custom',
  setup: (editor) => {
    editor.ui.registry.addMenuItem('myCustomMenuItem', {
      text: 'My Custom Menu Item',
      onAction: () => alert('Menu item clicked')
    });
  }
});
```

> **Note:** The identifier used to create the menu item must be included in the [`menu`](../menus-configuration-options/#menu) option in the TinyMCE configuration for it to be added to the menubar’s menus. It will not be added to the menubar’s menus if `menu` is not configured correctly.

## Interactive example

This example shows you how to add some simple menu items to a new "custom" menu.

**Example**

```js
tinymce.init({
  selector: 'textarea#custom-menu-item',
  height: 500,
  toolbar: false,
  menubar: 'custom',
  menu: {
    custom: { title: 'Custom menu', items: 'basicitem nesteditem toggleitem' }
  },
  setup: (editor) => {
    let toggleState = false;

    editor.ui.registry.addMenuItem('basicitem', {
      text: 'My basic menu item',
      onAction: () => editor.insertContent(`<p>Here's some content inserted from a basic menu!</p>`)
    });

    editor.ui.registry.addNestedMenuItem('nesteditem', {
      text: 'My nested menu item',
      getSubmenuItems: () => [
        {
          type: 'menuitem',
          text: 'My submenu item',
          onAction: () => editor.insertContent(`<p>Here's some content inserted from a submenu item!</p>`)
        }
      ]
    });

    editor.ui.registry.addToggleMenuItem('toggleitem', {
      text: 'My toggle menu item',
      onAction: () => {
        toggleState = !toggleState;
        editor.insertContent(`<p class="toggle-item">Here's some content inserted from a toggle menu!</p>`);
      },
      onSetup: (api) => {
        api.setActive(toggleState);
        return () => {};
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```