---
title: "Options for customizing the editor’s toolbars"
description: "Information on options for customizing TinyMCE's toolbars"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 4810
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/toolbar-configuration-options/).
# Options for customizing the editor’s toolbars

## Basic toolbar options

### `toolbar`

This option allows you to specify the [buttons](../available-toolbar-buttons/) and the order that they will appear on TinyMCE’s toolbar.

#### Grouping toolbar buttons

To specify the buttons that should appear on TinyMCE’s toolbar, the `toolbar` option should be provided with a space separated list of [toolbar buttons](../available-toolbar-buttons/). To create groups within this list, please add `|` pipe characters between the groups of buttons that you would like to create.

**Type:** `String`

##### Example grouped toolbar

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo | styles | bold italic | link image'
});
```

> **Note:** The size of toolbar groups affects the behavior of the toolbar drawer when the `toolbar_mode` is set to `'floating'` (default value) or `'sliding'`. For more information, see: [the `toolbar_mode` option](#toolbar_mode).

##### Adding toolbar group labels

To specify labels to the grouped buttons that appear on TinyMCE’s toolbar, the `toolbar` option should be provided with an array of objects with `name` and `items` as object properties. The `name` should be a string value that will be set as the `title` attribute on the `div` containing the toolbar group. The `items` should be an array of strings that indicate the buttons that should appear within the particular toolbar group.

**Type:** `Array`

###### Example: adding toolbar group labels

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    { name: 'history', items: [ 'undo', 'redo' ] },
    { name: 'styles', items: [ 'styles' ] },
    { name: 'formatting', items: [ 'bold', 'italic' ] },
    { name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
    { name: 'indentation', items: [ 'outdent', 'indent' ] }
  ]
});
```

#### Disabling the toolbar

To disable the toolbar, the toolbar option should be provided a boolean value of `false`.

**Type:** `Boolean`

**Default value:** `true`

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

##### Example: disabling the toolbar

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

#### Using multiple toolbars

To specify multiple toolbars, the toolbar option should be provided with an array of space separated strings.

**Type:** `Array`

##### Example: adding multiple toolbars

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    'undo redo | styles | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});
```
Alternatively, you may specify multiple toolbars through the use of the [toolbar(n)](#toolbarn) option.

### `toolbar(n)`

This option allows you to specify the buttons and the order that they will appear on instances of multiple toolbars.

**Type:** `String`

#### Example: using `toolbar(n)`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar1: 'undo redo | styles | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});
```
Please see the [toolbar](#toolbar) configuration option for details.

### `toolbar_groups`

The `toolbar_groups` option creates a toolbar button that displays a collection of other toolbar buttons as a pop-up toolbar. The style of toolbar shown is based on the current [toolbar mode](#toolbar_mode). For example, if `toolbar_mode` is set to `floating`, the toolbar group pop-up will appear in a floating shelf.

> **Note:** The `toolbar_groups` feature is *only* supported when using the `floating` toolbar mode. If the `toolbar_groups` option is used with other toolbar modes, the toolbar group button will not be displayed and a warning message will be printed in the console.
This option accepts an object, mapping the button name to the group configuration. For details on configuring toolbar groups, see: [`group toolbar button configuration`](../custom-group-toolbar-button/).

**Type:** `Object`

#### Example: using `toolbar_groups`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'formatting | alignleft aligncenter alignright',
  toolbar_groups: {
    formatting: {
      icon: 'bold',
      tooltip: 'Formatting',
      items: 'bold italic underline | superscript subscript'
    }
  }
});
```

## Main editor toolbar behavior

### `toolbar_mode`

The `toolbar_mode` option is used to extend the toolbar to accommodate the overflowing toolbar buttons. This option is useful for small screens or small editor frames.

When the toolbar_mode is set to `'floating'` or `'sliding'`, the editor will move toolbar buttons to the toolbar drawer based on:

- The defined toolbar groups.
- The width of the editor.
For example. If the following toolbar configuration is wider than the editor, the items before the separator (`|`) will appear in the main toolbar and the rest will be moved to the toolbar drawer.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo styles bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
});
```
Two situations to consider when organising the toolbar:

- When there are two or more toolbar button groups, the main toolbar will show as many complete, sequential toolbar groups as possible within the width of the editor. Any remaining toolbar button groups will be moved to the toolbar drawer.
- If the first toolbar button group is wider than the editor, the whole toolbar will be shown in the toolbar drawer.
The toolbar modes are not available when using [multiple toolbars](#using-multiple-toolbars) or the [toolbar(n)](#toolbarn) option.

**Type:** `String`

**Default value:** `'floating'`

**Possible values:** `'floating'`, `'sliding'`, `'scrolling'`, or `'wrap'`

> **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).

#### Modes

The toolbar mode is specified in the `tinymce.init`. There are four toolbar modes:

- [Floating](#floating)
- [Sliding](#sliding)
- [Scrolling](#scrolling)
- [Wrap](#wrap)

##### Floating

If the `toolbar_mode` is configured to `floating`, the toolbar appears under the toolbar overflow icon in a floating shelf format when the toolbar overflow icon
![Drawer](../_images/icons/more-drawer.svg)
is clicked.

![Floating Toolbar](../_images/floating-toolbar.png)

###### Configuring a Floating toolbar

Use the following settings to configure a Floating toolbar:

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

##### Sliding

If the `toolbar_mode` is configured to `sliding`, the toolbar appears as a fixed toolbar under the first toolbar when the toolbar overflow icon
![Drawer](../_images/icons/more-drawer.svg)
is clicked.

![Sliding Toolbar](../_images/sliding-toolbar.png)

###### Configuring a Sliding toolbar

Use the following settings to configure a Sliding toolbar:

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

##### Scrolling

The scrolling toolbar mode is intended for touch screen devices.

If the `toolbar_mode` is configured to `scrolling`, the overflow toolbar buttons will remain on the toolbar, but will be hidden from view. To access the overflow toolbar buttons, scroll the toolbar. To scroll the toolbar on a touch screen, use a swiping action. To scroll on a desktop device, hold shift and scroll with a mouse.

A scrollbar will be shown on the toolbar on desktop devices and hybrid devices in desktop mode.

![Scrolling Toolbar](../_images/scrolling-toolbar.png)

###### Configuring a Scrolling toolbar

Use the following settings to configure a Scrolling toolbar:

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

##### Wrap

If the `toolbar_mode` is configured to `wrap`, the overflow toolbar buttons will be shown on one or more toolbars below the primary toolbar.

![Wrapped Toolbar](../_images/wrapped-toolbar.png)

###### Configuring a Wrapped toolbar

Use the following settings to configure a wrapped toolbar:

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

### `toolbar_location`

The `toolbar_location` option is used to position the [toolbar](#toolbar) and [menubar](../menus-configuration-options/#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_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_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 toolbar options

### `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](../menus-configuration-options/#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) toolbars

### `quickbars_selection_toolbar`

The **quickbars_selection_toolbar** option configures the Quick Selection toolbar provided by the [quickbars plugin](../quickbars/). To change the buttons on the Quick Selection toolbar, provide a space-separated string of [toolbar button names](../available-toolbar-buttons/). The Quick Selection toolbar is intended for buttons related to formatting content, but any [TinyMCE toolbar buttons](../available-toolbar-buttons/) or [custom toolbar buttons](../custom-toolbarbuttons/) are allowed.

To disable the Quick Selection toolbar, set `quickbars_selection_toolbar` to `false`.

**Type:** `String`

**Default value:** `'bold italic | quicklink h2 h3 blockquote'`

#### Example: customizing the Quick Selection toolbar

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote'
});
```

#### Example: disabling the Quick Selection toolbar

To disable the Quick Selection toolbar, set `quickbars_selection_toolbar` to `false`.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_selection_toolbar: false
});
```

### `quickbars_insert_toolbar`

The **quickbars_insert_toolbar** option configures the Quick Insert toolbar provided by the [quickbars plugin](../quickbars/). To change the buttons on the Quick Insert toolbar, provide a space-separated string of [toolbar button names](../available-toolbar-buttons/). The Quick Insert toolbar is intended for buttons related to inserting content, but any [TinyMCE toolbar buttons](../available-toolbar-buttons/) or [custom toolbar buttons](../custom-toolbarbuttons/) are allowed.

To disable the Quick Insert toolbar, set `quickbars_insert_toolbar` to `false`.

**Type:** `String`

**Default value:** `'quickimage quicktable'`

#### Example: customizing the Quick Insert toolbar

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars pagebreak',
  quickbars_insert_toolbar: 'quickimage quicktable | hr pagebreak'
});
```

#### Example: disabling the Quick Insert toolbar

To disable the Quick Insert toolbar, set `quickbars_insert_toolbar` to `false`.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});
```

### `quickbars_image_toolbar`

The **quickbars_image_toolbar** option configures the Quick Image toolbar provided by the [quickbars plugin](../quickbars/). To change the buttons on the Quick Image toolbar, provide a space-separated string of [toolbar button names](../available-toolbar-buttons/). The Quick Image toolbar is intended for image-related buttons, but any [TinyMCE toolbar buttons](../available-toolbar-buttons/) or [custom toolbar buttons](../custom-toolbarbuttons/) are allowed.

To disable the Quick Image toolbar, set `quickbars_image_toolbar` to `false`.

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

**Default value:** `'alignleft aligncenter alignright'`

#### Example: customizing the Quick Image toolbar

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars image editimage',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions'
});
```

#### Example: disabling the Quick Image toolbar

To disable the Quick Image toolbar, set `quickbars_image_toolbar` to `false`.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});
```

## Contextual (content-specific) plugin toolbars

### `editimage_toolbar`

The exact selection of buttons that will appear on the contextual toolbar can be controlled via `editimage_toolbar` option.

**Possible values:**

- `rotateleft`
- `rotateright`
- `flipv`
- `fliph`
- `editimage`
- `imageoptions`
**Type:** `String`

**Default value:** `'rotateleft rotateright | flipv fliph | editimage imageoptions'`

#### Example: using `editimage_toolbar`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
});
```

### `link_context_toolbar`

By default it is not possible to open links directly from the editor. Setting `link_context_toolbar` to `true` will enable a context toolbar that will appear when the user’s cursor is within a link. This context toolbar contains fields to modify, remove and open the selected link. External links will be opened in a separate tab, while relative links scroll to a target within the editor (if the target is found).

> **Note:** This context toolbar is the same as the context toolbar mentioned in the [Link plugin - `link_quicklink`](../link/#link_quicklink) documentation.
**Type:** `Boolean`

**Default value:** `false`

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

#### Example: using `link_context_toolbar`

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

### `table_toolbar`

This option allows you to specify the toolbar buttons shown on the contextual toolbar for tables. Provide a space-separated list of toolbar buttons in the order they should be shown. To create groups on the toolbar, use the `|` pipe character to add a separator between toolbar buttons.

To disable the table toolbar, set the value to an empty string.

**Type:** `String`

**Default value:** `'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'`

**Possible values:** Any toolbar button. For a list of predefined toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

#### Example: default table_toolbar configuration

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});
```

#### Example: disable the table toolbar

To disable or remove the contextual table toolbar, set `table_toolbar` to an empty string.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: ''
});
```