---
title: "Table of Contents plugin"
description: "Insert a simple Table of Contents into TinyMCE editor"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tableofcontents/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/tableofcontents/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 682
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/tableofcontents/).
# Table of Contents plugin

> **Important:** TinyMCE 5.10 will include the final release of the Table of Contents plugin (`toc`) as an open source plugin. The Table of Contents plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.
The `toc` plugin will generate basic *Table of Contents* and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'toc',
  toolbar: 'toc',
  menubar: 'insert'
});
```
The *Table of Contents* will have a simple HTML structure - a wrapper `div` element, a header with *editable* title and unordered nested list with navigation links. Nesting depth is customizable.

Internally plugin doesn’t apply any inline styles. Basic formatting can be added via [Boilerplate Content CSS](../editor-content-css/), that can be customized to your needs.

```css
/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}
```

## Options

### `toc_depth`

By default, headers in the content will be inspected only three levels deep, so - `H1` through `H3`. But it is possible to change this behavior by setting `toc_depth` to any number in 1-9 range, therefore matching all the headers beginning with `H1` and all the way down to `H9`.

**Type:** `Number`

**Default Value:** `3`

#### Example: Using `toc_depth`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_depth: 3
});
```

### `toc_header`

Table of contents has a header and by default it will be marked up with `H2` tag. With the `toc_header` option you can change it to some other tag.

**Type:** `String`

**Default Value:** `H2`

#### Example: Using `toc_header`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_header: 'div' // case doesn't matter
});
```

### `toc_class`

With `toc_class` you can change the class name that gets assigned to the wrapper `div`. Please note that you will have to alter [Boilerplate Content CSS](../editor-content-css/) accordingly.

**Type:** `String`

**Default Value:** `mce-toc`

#### Example: Using `toc_class`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_class: 'our-toc'
});
```