Paragraphs Menu Anchor

Adds a sticky anchor navigation menu to Paragraph-based pages. Editors choose which paragraphs appear as anchor links by checking a field directly in the edit form — no custom theming required

Features

• Compound field type (pma_anchor): a single field added once to each paragraph type stores both the enabled toggle and the link label. No need to manage separate boolean and text fields.
• Automatic anchor block: place the Paragraphs Anchor Menu block in any region and it will scan the current node, collect every paragraph that has the anchor enabled, and render the navigation links automatically.
• Scroll-spy: the active section is highlighted in real time as the user scrolls, with no heavy dependencies.
• Mobile-friendly: an optional native <select> element is rendered alongside the link list and shown only on small screens.
• Programmatic extension: implement hook_paragraphs_menu_anchor_links_alter(&$links) in any custom module to inject static links — useful for sections already present in the page that are not paragraph-based.
• Configurable scroll offset: the block settings accept a CSS selector for the sticky header so active-section detection accounts for the header height correctly.

Post-Installation

1. Go to Structure → Paragraph types → [Your type] → Manage fields and add the Paragraph Anchor field (field_pma_anchor, type Paragraph Anchor) to every paragraph type that should be able to appear in the anchor menu.
2. In Manage display for each paragraph type, set field_pma_anchor to the formatter Anchor (hidden — used by block). The field renders nothing on its own; the block and a preprocess hook handle its output.
3. Go to Structure → Block layout, place the Paragraphs Anchor Menu block in the desired region, and configure the header CSS selector (e.g. #navbar) to match your theme.
4. Edit any node, open a paragraph, check Anchor menu, and type the link label. The block will generate a link and the paragraph wrapper will receive a matching id attribute automatically.

The anchor id is built by transliterating the label to ASCII → lowercasing → replacing non-alphanumeric characters with hyphens. Example: "Plan de Estudios" → plan-de-estudios.

Additional Requirements

• Paragraphs module.

Recommended modules/libraries

None at this time.

Similar projects

• Anchor Link — adds a CKEditor button to insert anchor links inside body text. It is not paragraph-aware and does not generate a navigation block.
• In-page Navigation — generates a table of contents from heading elements in the rendered HTML. It requires no editorial input but depends on heading structure, whereas this module lets the editor explicitly choose which paragraphs appear in the menu and control the label independently of the paragraph content.

A note on transparency

This module was vibe coded and reviewed by Claude Code. It is currently under active development — feedback and issue reports are welcome.