Views Tree
A Views style plugin to display a tree of elements using the adjacency model.
views_tree
Install
composer require 'drupal/views_tree:^3.0'
Overview
The Views Tree module provides Views style plugins that render query results as nested hierarchical trees. It uses the adjacency model, where each record has a reference to its parent record, to construct the tree structure. Despite the hierarchical output, only a single database query is executed, making the module highly performant even with large datasets.
The module supports two display formats: a nested HTML list (unordered or ordered) and a table format with visual indentation indicating hierarchy levels. It also includes an entity reference selection plugin that displays entities in a hierarchical tree format within entity reference fields. Optional JavaScript-based collapsible functionality allows users to expand and collapse tree branches interactively.
This is a continuation of the tree-based style template functionality from Views 1, adapted for modern Drupal versions. The module is ideal for displaying menu structures, organizational hierarchies, category trees, threaded comments, and any content with parent-child relationships.
Features
- Provides 'Tree (list)' Views style plugin that renders results as nested unordered or ordered HTML lists
- Provides 'Tree (table)' Views style plugin that displays hierarchical data in a table format with indentation
- Entity reference selection plugin 'TreeHelper (Adjacency model)' for displaying entities in tree format within autocomplete fields
- Collapsible tree functionality with JavaScript - trees can start expanded or collapsed with click-to-toggle behavior
- Single query performance - builds the entire tree structure from a single database query using the adjacency model
- TreeHelper service for programmatically building tree structures from Views result sets
- Data attribute-based hierarchy level indication for CSS styling in table displays
- Support for any entity reference field type including node references, user references, and taxonomy references
Use Cases
Displaying a menu or navigation hierarchy
Use Views Tree to display menu items or navigation links in their natural parent-child structure. Create a View of menu link content entities, add the ID field as the main field and the parent menu link reference as the parent field. The resulting nested list mirrors the menu hierarchy perfectly.
Organizational chart or company structure
Display staff or departments in a hierarchical org chart. If you have a 'Reports To' entity reference field on user or custom entity types, use that as the parent field to show the complete organizational hierarchy from executives down to individual contributors.
Nested category or taxonomy display
Show taxonomy terms or category entities with their full parent-child relationships. Particularly useful for product categories, content classifications, or any multi-level taxonomy that needs to be displayed in a single expandable tree.
Threaded comments or discussions
Render comments in a threaded conversation view where replies appear nested under their parent comments. The tree structure clearly shows the conversation flow and which comments are responses to which.
File and folder browser
Create a file management interface showing folders and files in a hierarchical tree structure, similar to a file system explorer. Users can see the complete directory structure at a glance.
Hierarchical entity reference selection
When using entity reference fields for hierarchical content (like selecting a parent category or parent page), use the Views Tree entity reference selection plugin to display options in a tree format, making it easy to understand and select the correct parent entity.
Tips
- Always include both the main identifier field and parent reference field in your View, even if you exclude them from display - they are required for building the tree structure
- Use the 'Table' style when you need to display multiple data columns alongside the hierarchy, and 'List' style for simpler nested list presentations
- The collapsible tree feature requires JavaScript; consider providing CSS-only fallbacks for non-JS environments if needed
- For large hierarchies, consider adding exposed filters or pager settings to manage the amount of data displayed
- When using with entity reference selection, ensure the View has appropriate access controls as users will see all entities returned by the View
- The table style supports up to 8 levels of nesting with built-in CSS; for deeper hierarchies, add custom CSS rules for additional data-hierarchy-level values
- Parent items that reference themselves or have circular references are automatically handled - they become root-level items
Technical Details
Hooks 1
hook_theme
Defines the views_tree and views_tree_table theme hooks with their variables