---
title: "Header Block — Levels, Anchors, Shortcuts"
description: "Headings H1 to H6 with markdown shortcuts, anchor ids, and level conversion from the block settings menu."
source: https://blokeditor.com/docs/header/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Header

# Header block: headings H1 to H6

Heading blocks from H1 to H6. Supports multiple toolbox entries (one per heading level), keyboard shortcuts (# ## ### etc.), and optional toggle (collapse/expand children) at every level — the toolbox lists "Toggle heading 1" through "Toggle heading 6", reachable with the markdown shortcuts `>#` through `>######`. Converting an existing block into a toggle heading (via "Turn into" or `blocks.convert` with `isToggleable: true`) adopts its section — every following sibling until the next heading of the same or higher rank becomes a child of the new toggle, matching Notion.

### Import

TypeScript

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

### Configuration

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `level name (e.g. "Heading 2", localised)` | Placeholder text shown in an empty heading block. |
| `levels` | `number[]` | `[1,2,3,4,5,6]` | Restrict which heading levels are available. |
| `defaultLevel` | `number` | `2` | The heading level used when inserting a new header block. |
| `levelOverrides` | `Record<number, { tag?, name?, size?, marginTop?, marginBottom? }>` | `{}` | Per-level overrides for HTML tag, display name, or CSS values. |
| `shortcuts` | `Record<number, string>` | `undefined` | Custom markdown prefixes per heading level. If omitted, the default markdown prefixes (#, ## …) are used. Pass an empty object {} to disable the plain heading prefixes — the toggle-heading prefixes (`>#` … `>######`) are matched separately, are always active, and cannot be configured or disabled here (they still respect `levels`). |
| `anchorIds` | `boolean | (text: string, blockId: string) => string` | `undefined` | Opt-in text-derived anchor ids on rendered headings. true uses the built-in slugifier (keeps Unicode letters/digits and letter case, strips punctuation and zero-width chars, joins words with hyphens, e.g. «Обучайте команду» → id "Обучайте-команду"); a function lets you generate ids yourself (empty string = no id). Ids stay in sync on text edits and survive level changes. Cross-block duplicate dedup is out of scope — consumers dedup themselves. |

### Save Data

TypeScript

```
interface HeaderData {
  text: string;             // Heading HTML content
  level: number;            // 1–6
  isToggleable?: boolean;   // true when the heading has toggle (collapse/expand)
  isOpen?: boolean;         // Persisted toggle state, present when toggleable
  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": "Getting Started",
    "level": 2
  }
}
```

### Usage Example

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',
    },
  },
});
```