---
title: "Блок «Заголовок» — уровни, якоря, сокращения"
description: "Заголовки от H1 до H6 с markdown-сокращениями, якорными идентификаторами и сменой уровня из меню настроек блока."
source: https://blokeditor.com/ru/docs/header/
lastmod: 2026-10-07
---

Фреймворк JavaScript

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

# Заголовок: уровни от H1 до H6

Блоки заголовков от H1 до H6. Поддерживают несколько пунктов тулбокса, по одному на уровень заголовка, и сочетания клавиш (#, ##, ### и т. д.).

На любом уровне доступен необязательный режим переключателя, который сворачивает и разворачивает дочерние блоки. В тулбоксе есть пункты от «Сворачиваемый заголовок 1» до «Сворачиваемый заголовок 6», доступные по markdown-префиксам `>#` … `>######`.

Преобразование существующего блока в сворачиваемый заголовок забирает его секцию: используйте «Преобразовать в» или `blocks.convert` с `isToggleable: true`. Каждый следующий соседний блок до ближайшего заголовка того же или более высокого ранга становится дочерним для нового переключателя. Так же это работает в Notion.

### Импорт

TypeScript

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

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `placeholder` | `string` | `level name (e.g. "Heading 2", localised)` | Плейсхолдер, который показывается в пустом блоке заголовка. |
| `levels` | `number[]` | `[1,2,3,4,5,6]` | Ограничивает набор доступных уровней заголовков. |
| `defaultLevel` | `number` | `2` | Уровень заголовка, который используется при вставке нового блока header. |
| `levelOverrides` | `Record<number, { tag?, name?, size?, marginTop?, marginBottom? }>` | `{}` | Переопределения HTML-тега, отображаемого названия или CSS-значений для каждого уровня. |
| `shortcuts` | `Record<number, string>` | `undefined` | Собственные markdown-префиксы для каждого уровня заголовка. Если опция не задана, используются стандартные markdown-префиксы (#, ## …). Передайте пустой объект {}, чтобы отключить префиксы обычных заголовков. Префиксы сворачиваемых заголовков (`>#` … `>######`) сопоставляются отдельно и активны всегда. Настроить или отключить их здесь нельзя, и они по-прежнему учитывают `levels`. |
| `anchorIds` | `boolean | (text: string, blockId: string) => string` | `undefined` | Подключаемые по желанию id-якоря, выводимые из текста отрисованных заголовков. При значении true работает встроенный слагификатор. Он сохраняет буквы и цифры Unicode и регистр букв, убирает пунктуацию и символы нулевой ширины, соединяет слова дефисами, например «Обучайте команду» → id "Обучайте-команду". Функция позволяет генерировать id самостоятельно (пустая строка означает, что id не добавляется). Id остаются синхронными при правках текста и переживают смену уровня. Если у заголовка есть собственный data.anchor, сохраняется он. Устранение дублей между блоками сюда не входит, потребители дедуплицируют их сами. |

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

TypeScript

```
interface HeaderData {
  text: RichText;           // Heading text as segments (HeaderToolData holds HTML)
  level: number;            // 1–6
  isToggleable?: boolean;   // true when the heading has toggle (collapse/expand)
  textColor?: string;       // Block colour preset, present when set
  backgroundColor?: string; // Block background colour preset, present when set
  anchor?: string;          // Anchor id for in-document links, present when set
}
```

JSON

```
{
  "id": "def456",
  "type": "header",
  "data": {
    "text": [{ "text": "Getting Started" }],
    "level": 2
  }
}
```

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

TypeScript

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

const editor = new Blok({
  holder: 'editor',
  tools: {
    header: {
      class: Header,
      levels: [1, 2, 3],
      defaultLevel: 2,
      placeholder: 'Enter a heading',
    },
  },
});
```