SDC Anchor Navigation

SDC Anchor Navigation lets you link directly to a specific component on a page. Add an anchor_id prop to any Single Directory Component (SDC), give it a value such as pricing, and /services#pricing scrolls to that component, moves focus to it and highlights it briefly.

It works wherever SDCs are rendered: Drupal Canvas, Experience Builder, Layout Builder, or a plain Twig include(). No per-component Twig or PHP changes are needed.

Features

• Opt-in per component: only components that declare an anchor_id prop are affected.
• Adds a data-anchor-id attribute automatically through the component's {{ attributes }}.
• Smooth scroll on page load and when the URL fragment changes, with a brief highlight.
• Accessible: moves keyboard and screen reader focus to the component and respects reduced-motion settings.
• Themeable through CSS custom properties, including an offset for sticky headers.
• Lightweight: the small script and stylesheet load only on pages that render an anchored component.
• Uses data-anchor-id instead of id, so anchors never collide with IDs generated by Drupal or your theme.

Requirements

Drupal 10.3 or later, or Drupal 11. No other modules are required.

Installation

composer require drupal/sdc_anchor_nav
drush en sdc_anchor_nav

Usage

Add the prop to your component's *.component.yml:

props:
  type: object
  properties:
    anchor_id:
      type: string
      title: Anchor ID
      pattern: '^[a-zA-Z0-9_-]+$'

Make sure the component's root element prints {{ attributes }}, set a value where the component is placed, and link to it with /page#your-anchor.

Theming

• --sdc-anchor-nav-offset: space kept above the component when scrolled into view (for sticky headers).
• --sdc-anchor-nav-highlight-color: color of the temporary highlight outline.

Security

Anchor IDs are limited to letters, digits, hyphens and underscores. They are validated by the component schema and again in PHP, and escaped on output. The URL fragment is escaped with CSS.escape() before it is used in a selector.

Similar projects

Plain HTML id anchors need template changes per component and can collide with generated IDs. This module adds the anchor through component props, so site builders and Canvas editors can set it without touching templates.

Development sponsored by Specbee.