branch menu

A custom Drupal 11 module that renders standard menus as polygonal tree graph using D3.js.

Technical Overview

The Branch Menu module provides a custom block that recursively extracts up to 6 levels of menu links and injects them into a frontend JavaScript environment. The frontend utilizes D3.js to dynamically draw a geometric, downward-flowing tree graph without overlapping nodes.

Features
* **Dynamic Block Configuration:** Select which Drupal menu to render directly from the block layout UI.
* **Polygonal Path Generation:** Overrides standard D3 curves with strict algorithmic rules to create architectural, angular branches (40% to 60% mid-point elbows).
* **Anti-Overlap Logic:** Employs a cascading Y-axis coordinate calculation, ensuring child nodes strictly flow downward and siblings never overlap.
* **Dynamic Typography Placement:** Text anchors automatically flip (left/right) based on the branch direction to prevent intersecting lines.
* **SVG Animations:** Includes hardware-accelerated SVG scaling (`transform-box: fill-box`) and stroke-width transitions on hover.

Architecture

The module is structured as follows:

* `branch_menu.info.yml`: Module declaration and core requirements.
* `branch_menu.libraries.yml`: Dependency management (loads D3.js v7 via CDN and local assets).
* `src/Plugin/Block/BranchMenuBlock.php`: Backend logic to load `MenuLinkTreeInterface`, extract hierarchy, and pass variables to `drupalSettings`.
* `js/branch_menu.js`: Core D3.js logic calculating layout, Bounding Box (viewBox), and SVG paths.
* `js/branch_animations.js`: Event listeners handling non-destructive `mouseenter` and `mouseleave` CSS transitions.
* `css/branch_menu.css`: Base visual styles, crisp-edge rendering, and animation curves.

branch_menu/
├── branch_menu.info.yml
├── branch_menu.libraries.yml
├── branch_menu.module
├── README.md
├── css/
│ └── branch_menu.css
├── js/
│ ├── branch_menu.js
│ └── branch_animations.js
└── src/
└── Plugin/
└── Block/
└── BranchMenuBlock.php

Installation

1. Place the `branch_menu` folder in your project's `web/modules/custom/` directory.
2. Enable the module via Drush (`drush en branch_menu`) or the Extend interface.
3. Navigate to **Structure > Block layout**.
4. Place the **"Branch Menu Graph"** block in your desired region.
5. In the block configuration, select the menu you wish to render.
6. Ensure your selected menu has its parent links set to **"Show as expanded"** to allow deep rendering.

Dependencies

* Drupal Core ^11
* D3.js v7 (Loaded externally via jsDelivr CDN by default)