---
title: "Блок «Оглавление» — живой список заголовков"
description: "Блок, который перечисляет заголовки страницы и ведёт к каждому. Список строится на лету и не сохраняется."
source: https://blokeditor.com/ru/docs/table_of_contents/
lastmod: 2026-10-05
---

Фреймворк JavaScript

Блочные инструменты Оглавление

# Оглавление: живой список заголовков

Список заголовков страницы. Каждый пункт ведёт к своему заголовку. Вставляется через тулбокс или вводом `/toc`.

Список строится по странице на лету, поэтому он не сохраняется. Он обновляется, когда вы добавляете, переименовываете, перемещаете или удаляете заголовки. Блок показывает заголовки верхнего уровня и заголовки внутри колонок и выносок. Заголовки внутри переключателей, списков и заголовков-переключателей он пропускает. Пункты сдвигаются по уровню заголовка, а пропущенный уровень не добавляет лишнего отступа.

Щёлкните пункт или поставьте на него фокус и нажмите Enter, чтобы прокрутить к заголовку. ArrowUp/ArrowDown, Home и End переключают пункты. Пункт раздела, который вы сейчас читаете, отмечен атрибутом `aria-current="location"`.

Без заголовков блок показывает «Добавьте заголовки, чтобы создать оглавление.». Он работает в режиме только для чтения. Вставка оглавления из Notion создаёт этот блок. При экспорте в Markdown блок пропускается, потому что заголовки экспортируются сами.

`blocksToHtml` (и HTML-экспорт на сервере) выводит его как `<nav>` со ссылками, собранный по сохранённым заголовкам. Каждый заголовок из списка получает `id`, чтобы ссылки работали: свой `anchor`, если он есть, иначе id блока. У каждого пункта есть `data-depth`.

### Импорт

TypeScript

```
import { TableOfContents } from '@bloklabs/core/tools';
```

### Формат данных

TypeScript

```
interface TableOfContentsData {
  textColor?: string;       // Colour preset name, absent for default
  backgroundColor?: string; // Colour preset name, absent for none
}
```

JSON

```
{
  "id": "toc001",
  "type": "table_of_contents",
  "data": {
    "backgroundColor": "gray"
  }
}
```

### Пример использования

TypeScript

```
import { Blok } from '@bloklabs/core';
import { TableOfContents } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    table_of_contents: {
      class: TableOfContents,
    },
  },
});
```