Collapsible Drag 'n Drop
Adds collapse and expand functionality to Drupal's draggable tables, making it easier to manage large hierarchical structures like menus.
collapsible_dnd
Install
composer require 'drupal/collapsible_dnd:^3.0'
composer require 'drupal/collapsible_dnd:8.x-2.1'
Overview
Collapsible Drag 'n Drop enhances Drupal's built-in draggable table functionality by adding the ability to collapse and expand hierarchical sub-trees. This solves a significant usability problem when managing large menu structures or any content organized in draggable tables with deep nesting.
When working with Drupal's menu system, dragging items to reorder or change their hierarchy becomes increasingly difficult as the menu grows. If a parent item has many children, the sub-tree can easily exceed the screen height, making drag operations cumbersome or nearly impossible. This module adds collapse/expand buttons to each row that has children, allowing administrators to temporarily hide sub-trees during drag operations.
The module works automatically with any draggable table in Drupal's admin interface, not just menus. It attaches itself as a dependency to Drupal's core tabledrag library, so no additional configuration is needed - simply install the module and the functionality is immediately available wherever draggable tables are used.
Features
- Adds collapse/expand toggle buttons to rows with children in draggable tables
- Automatically hides child items when a parent row is collapsed, making drag operations easier
- Starts with all hierarchies collapsed by default for cleaner initial view
- Dynamically recalculates parent-child relationships after drag operations complete
- Works with any draggable table in Drupal, including menu management, taxonomy term ordering, and custom implementations
- Theme-aware styling with specific adjustments for Seven and Claro admin themes
- Uses MutationObserver to detect when items are dragged and dropped, updating collapse states accordingly
- Smoothly hides items with fade animation when dropped into a collapsed parent
Use Cases
Managing large navigation menus
When your site has a complex menu structure with many nested items (e.g., a mega menu with multiple levels), dragging menu items to reorder them becomes extremely difficult because the expanded menu can be longer than your screen. With this module, you can collapse parent menu items to hide their children temporarily, making it easy to drag the parent to a new position or reorder items at the same level.
Organizing taxonomy terms with deep hierarchies
Sites using taxonomy vocabularies with many levels of nested terms face similar challenges when reordering terms. This module allows you to collapse sections of the hierarchy, making it manageable to work with the drag-and-drop interface even with hundreds of terms.
Working with entity reference field ordering
Some Drupal configurations use draggable tables for ordering referenced entities. When these references have hierarchical relationships, this module makes the ordering interface more usable by allowing collapse of sub-trees.
Custom draggable table implementations
If you have custom modules that implement draggable tables using Drupal's tabledrag library, this module automatically enhances them with collapse/expand functionality without any additional code changes.
Tips
- All items start collapsed by default for a cleaner initial view - click the arrow icons to expand sections as needed
- After dragging items, the module automatically recalculates which items have children and updates the collapse buttons accordingly
- If you're working with a very large hierarchy, collapse items you're not working with to keep the interface manageable
- The module uses CSS transitions for smooth visual feedback when collapsing and expanding items
Technical Details
Hooks 3
hook_library_info_alter
Used to attach the collapsible_dnd library as a dependency of Drupal's core drupal.tabledrag library, ensuring the collapse/expand functionality is automatically available wherever draggable tables are used.
hook_preprocess_html
Adds a CSS class to the body element indicating the active admin theme (e.g., 'theme-claro', 'theme-seven'), enabling theme-specific styling for the collapse/expand buttons.
hook_help
Implements the help page for the module, displaying the README.md content either as plain text or rendered through the Markdown module if available.
Troubleshooting 3
Ensure the module is enabled and clear Drupal's cache. The module attaches its library to core's tabledrag, so a cache clear may be necessary for the dependency to take effect.
The module includes specific styles for Seven and Claro themes. For custom admin themes, you may need to add CSS overrides. The module adds a class like 'theme-[themename]' to the body element which you can use for targeting.
This is expected behavior - when you drop an item into a collapsed parent, it will be hidden along with the other collapsed children. Expand the parent to see the item in its new position.