Better contextual links

Better Contextual Links
Introduction
Better Contextual Links is a lightweight utility module for Drupal 11 that dramatically improves backend usability and content editing workflows. By default, Drupal's contextual links require precise hovering over specific wrapper regions, which can make locating and editing page elements frustrating.

This module introduces a visual inspector mode with a floating toggle button, an initial global sweep animation to reveal all editable areas instantly, and a smart "lowest-in-hierarchy" hover algorithm to eliminate visual clutter on complex nested layouts.

Features
Floating Toggle Button: A convenient fixed-position toggle button to enable or disable the contextual link inspector instantly (starts turned off by default).

Initial Global Sweep Animation: The moment you turn it on, it triggers a smooth, one-time pulse/sweep across all contextual elements on the page so you can see every editable block and region at a glance.

Lowest-in-Hierarchy Hover Inspector: On complex nested layouts (such as paragraphs or deeply nested containers), hovering highlights only the deepest, innermost element containing a contextual link, preventing overlapping parent border conflicts.

Click-to-Open Precision: When inspector mode is active, clicking anywhere on a highlighted element immediately triggers and opens Drupal's contextual menu right at your mouse coordinates (clientX, clientY).

Modern CSS & DOM Performance: Built with lightweight Vanilla JS and modern CSS animations designed for Drupal 11 themes.

Requirements
Drupal 11

Core contextual module enabled

Installation
Install the module as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

Enable the Better Contextual Links module via the Extend page (/admin/modules) or via Drush:

Bash
drush en better_contextual_links
Configuration & Usage
Navigate to any page on your site with the appropriate administrative permissions.

Look for the floating toggle button (typically fixed in the corner of your screen).

Click the button once to enable the inspector mode. You will see a quick animation sweep highlighting editable regions.

Hover over elements to inspect them, and click an element to open its contextual menu directly at your cursor position!