Advanced Header Field

Advanced Header Field provides a heading field that separates semantic meaning from visual style. Content editors can choose an appropriate heading level for accessibility and SEO without being limited by its visual presentation.

The field extends Drupal’s Link field, so headings can link to a destination. It also supports optional subtitles, generated or custom anchor IDs, built-in display styles, and project-specific styles. Heading data is stored together in the field’s storage table.

Features

• Choose a semantic heading tag independently from its visual size.
• Add an optional subtitle or link the heading.
• Generate an anchor ID or set a custom one.
• Apply built-in styles or configure project-specific styles.
• Choose the HTML Markup or Summary formatter.
• Optionally add a jump-menu block with the Advanced Header Field Navigation submodule.

Common use case

Add the field to layout Paragraphs to give each page section a meaningful heading and anchor. Editors can choose a heading level that fits the page structure while styling it to match the layout. With the optional Navigation submodule, selected section headings can also populate a jump menu.

Usage

Install the module with Composer and enable it along with Drupal core’s Link module:

composer require drupal/advanced_header_field
drush en link advanced_header_field

Add an Advanced Header Field to an entity bundle, configure the allowed heading tags and any custom styles, then select the HTML Markup formatter in the entity’s display settings. Styling is provided by your theme.

The optional Navigation submodule adds jump-menu controls to the field widget and provides the Advanced Header Field Jump Menu block. For headings to appear in the menu, configure the HTML Markup formatter to use its Semantic (<header>) wrapper.