---
title: "Options for customizing the editor’s menus"
description: "Information on options for customizing TinyMCE's menus"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/menus-configuration-options/index.md"
version: "7"
last_updated: "2025-05-08T10:35:12Z"
tokens: 3067
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/menus-configuration-options/).
# Options for customizing the editor’s menus

## Basic menu options

### `menubar`

This option specifies which menus appear and their order in the menu bar at the top of TinyMCE.

To define the menus on TinyMCE’s menu bar, provide the menubar option with a space-separated list of menus.

**Type:** `String` or `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`, or `string` of menus

> **Note:** The default value for this option is different for mobile devices. For information on the default mobile option, see: [TinyMCE Mobile — Configuration options with mobile defaults](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

#### Example: customizing the menu bar

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit insert view format table tools help'
});
```

#### Example: disabling/removing the menu bar

To disable the menu bar, set the `menubar` option to `false`.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: false
});
```
For more granular control over the contents of the menus, refer to the [menu option](#menu) documentation.

### `menu`

The `menu` option allows integrators to define the available menus for the [menubar option](#menubar) and specify the [menu items](../available-menu-items/) that appear within those menus.

To configure the menus, provide a JavaScript object where each property represents a menu. Each menu object should contain `title` and `items` properties. The `title` property is a string that defines the display name, while the `items` property is a space-separated list of the [menu items](../available-menu-items/) that should populate the menu.

To group certain menu items, insert a `|` pipe character between the menu items.

**Type:** `Object`

#### Example: the TinyMCE Default Menu Items

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | importword exportpdf exportword | print | deleteallconversations' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});
```

> **Note:** The default value for this option is different for mobile devices. For information on the default mobile option, see: [TinyMCE Mobile — Configuration options with mobile defaults](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

> **Note:** This option alone does not control which menus appear in the menu bar or the order in which they appear. To control the menu bar and the order of the menus in the menu bar, see the [menubar option](#menubar).

### `removed_menuitems`

This option enables the exclusion of items from TinyMCE’s menus. It is especially useful when configuring menus using only the [menubar](#menubar) option without defining custom menu items through the [menu](#menu) option.

**Type:** `String`

#### Example: using `removed_menuitems`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  removed_menuitems: 'undo redo'
});
```

## Main editor menubar behavior

The following "toolbar" options also affect the behavior of the menubar.

### `toolbar_location`

The `toolbar_location` option is used to position the [toolbar](../toolbar-configuration-options/#toolbar) and [menubar](#menubar). The default behavior is to position the toolbar and menu bar above the content area. Setting this option to `bottom` positions the toolbar and menu bar below the content area. This option works in [classic editor](../use-tinymce-classic/) (Iframe) mode and inline mode.

Setting this option to `auto`, positions the toolbar and menu bar either:

- Above the content area by default.
- Below the content area if there is not enough space to display the toolbar and menu bar above.
**Type:** `String`

**Default value:** `'auto'`

**Possible values:** `'auto'`, `'top'`, `'bottom'`

#### Example: using `toolbar_location`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar_location: 'bottom'
});
```

### `toolbar_sticky`

A Sticky Toolbar (or Docking Toolbar), docks the toolbar and the menu to the top of the screen when scrolling down a web page until the editor is no longer visible.

To enable Sticky Toolbars, set `toolbar_sticky` as `true` in the `tinymce.init` script. To disable Sticky Toolbars, set `toolbar_sticky` as `false`. Sticky toolbars are always enabled in inline mode and cannot be disabled.

To see a demo of sticky toolbar, see the [TinyMCE Sticky Toolbar Demo](https://codepen.io/tinymce/full/qBWLLMP).

**Type:** `Boolean`

**Default value:** `false` in `classic` mode, `true` in `inline` mode

**Possible values:** `true`, `false`

> **Note:** This feature is only supported when TinyMCE is run in *classic* mode. It is not supported in *inline* mode. For more information on the differences between the editing modes, see [Classic editing mode](../use-tinymce-classic/).

> **Note:** The default value for this option is different for mobile devices. For information on the default mobile option, see: [TinyMCE Mobile — Configuration options with mobile defaults](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

#### Example: using `toolbar_sticky`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar_sticky: true
});
```

### `toolbar_sticky_offset`

This option allows the toolbar to stick or dock at the specified offset from the top or bottom of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) depending on the [toolbar location (`toolbar_location`)](../toolbar-configuration-options/#toolbar_location). This can be useful when a site has a sticky header navigation bar, allowing the TinyMCE toolbar to "stick" below the site’s navigation bar. This option accepts a height in pixels.

> **Note:** This option requires the [`toolbar_sticky`](../toolbar-configuration-options/#toolbar_sticky) option be set to `true` to take effect.
**Type:** `Number`

**Default value:** `0`

#### Example: using `toolbar_sticky_offset`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar_sticky: true,
  toolbar_sticky_offset: 100
});
```

## Persistent inline editor menubar options

The following persistant "toolbar" options also provide a persistant menubar unless the menubar is disabled.

### `toolbar_persist`

> **Note:** This feature is only supported when TinyMCE is run in *inline* mode. It is not supported in *classic* mode. For more information on the differences between the editing modes, see [Inline editing mode](../use-tinymce-inline/).
This option disables the automatic show and hide behavior of the toolbar and menu bar for inline editors. Enable this option to always show the toolbar and menu bar, and not hide them whenever focus is lost. Use this option to make the toolbar and menu bar persistent for inline editors.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example

```js
tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  toolbar_persist: true
});
```

### `fixed_toolbar_container`

> **Note:** This feature is only supported when TinyMCE is run in *inline* mode. It is not supported in *classic* mode. For more information on the differences between the editing modes, see [Inline editing mode](../use-tinymce-inline/).
Use this option to render the inline toolbar into a fixed positioned HTML element. For example, you could fix the toolbar to the top of the browser viewport.

**Type:** `String`

#### Example: using `fixed_toolbar_container`

This example takes a CSS 3 selector named `'#mytoolbar'` and renders any inline toolbars into this element.

```js
tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container: '#mytoolbar'
});
```

### `fixed_toolbar_container_target`

> **Note:** This feature is only supported when TinyMCE is run in *inline* mode. It is not supported in *classic* mode. For more information on the differences between the editing modes, see [Inline editing mode](../use-tinymce-inline/).
Use this option to render the inline toolbar into a fixed-positioned HTML element by passing a `HTMLElement` directly to the option. This option is similar to the [`fixed_toolbar_container` option](#fixed_toolbar_container), which accepts a CSS selector.

> **Important:** `fixed_toolbar_container` has precedence over `fixed_toolbar_container_target`, so in order for `fixed_toolbar_container_target` to work, do not use the `fixed_toolbar_container` option.
**Type:** `HTMLElement`

#### Example: using `fixed_toolbar_container_target`

```js
const el = document.createElement('div');
document.body.appendChild(el);

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container_target: el
});
```

## Contextual (content-specific) menus

### `contextmenu`

The `contextmenu` option allows you to specify which items appear on the context menu. The format of this option is a space separated list of items in a string.

The context menu option accepts three styles of item:

- Any registered menu item.
- A `"|"` pipe character to indicate a separator should be added to delineate a group of menu items.
- Context menu sections defined by a plugin (usually equal to the plugin name). Separators are automatically inserted between context menu sections.
If the same name is registered as both a context menu section and a menu item, the context menu section takes preference.

The default configuration includes the context menu sections for the following plugins: `link`, `linkchecker`, `image`, `editimage`, `permanentpen`, `table`, and `tinymcespellchecker`.

To disable the editor’s context menu, set this option to `false`.

**Type:** `String` or `false`

**Default value:** `'link linkchecker image editimage table spellchecker configurepermanentpen'`

> **Note:** When the TinyMCE context menu is *enabled*, users can still access the browser context menu, including the browser spellchecker, using the `Ctrl+Right click` shortcut. However if the `contextmenu_never_use_native` option is enabled, holding the `Ctrl` key will have no effect.

> **Note:** When a TinyMCE context menu is configured, a user on a mobile device can access the TinyMCE context menu by a *long press*. However, when a TinyMCE context menu is not configured but a TinyMCE context toolbar is, *long press* will open the context toolbar instead.

#### Example: using `contextmenu`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'link image table',
  contextmenu: 'link image table'
});
```
For information on configuring the `contextmenu` option and creating custom context menu items [context menu examples](../contextmenu/).

### `contextmenu_avoid_overlap`

The `contextmenu_avoid_overlap` option prevents the context menu from covering (or overlapping) specific nodes within the editor. This option accepts a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). When the context menu is opened on a node that matches the specified selector, the context menu will render below the node, instead of where the click occurred. If there is not enough room in the browser window below the node, the context menu will be shown above the node.

**Type:** `String`

**Default value:** `''`

#### Example

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  contextmenu_avoid_overlap: '.mce-spelling-word'
});
```

### `contextmenu_never_use_native`

The `contextmenu_never_use_native` option allows you to prevent the browser context menu from appearing within the editor.

> **Caution:** Using this option may result in unexpected behavior when right-clicking in text areas. We advise you to consider all your options carefully before using this feature.
**Type:** `Boolean`

**Default value:** `false`

#### Example: using `contextmenu_never_use_native`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  contextmenu_never_use_native: true
});
```