Live demo — this example is server-driven; run the showcase locally for the interactive version.

Tree view

Use Tree view straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

tree-view

{#include components/navigation/tree-view /}

Tree view — PatternFly v6 
 Two modes.
   Model-driven: pass tree=<org.sitenetsoft.quarkus.pha.model.TreeView> (built via TreeView.builder()) —
     renders the whole tree incl. the phaTreeView() Alpine wiring; supports the whole-node,
     separate-selection and checkbox interaction patterns, search, expand-all, icons, badges, actions.
   Slot shell: omit tree and compose the <li> items in the main block (params below).
   Shell params: id — DOM id on the root; omit unless something else references the tree.
                 compact (optional), guides (optional) 
 Requires: /web/js/alpine/components/tree-view.js loaded before Alpine 
 
 This template renders the outer wrapper only. Each <li> tree item is the 
 consumer's responsibility, passed via the {#content} block. PF v6 ships 
 two interaction patterns for the node itself — pick one per item: 
 
   Default: clicking the whole node toggles both expansion and selection. 
   The node is a single <button class="pf-v6-c-tree-view__node">: 
     <button class="pf-v6-c-tree-view__node" type="button"> 
       <span class="pf-v6-c-tree-view__node-container"> 
         <span class="pf-v6-c-tree-view__node-toggle">...icon...</span> 
         <span class="pf-v6-c-tree-view__node-text">Label</span> 
       </span> 
     </button> 
 
   Separate selection and expansion (PF's hasSelectableNodes): the toggle 
   button only expands/collapses; the text button selects without changing 
   expansion. The node wrapper becomes a <div>, with two child <button>s: 
     <div class="pf-v6-c-tree-view__node" id="label-X"> 
       <span class="pf-v6-c-tree-view__node-container"> 
         <button class="pf-v6-c-tree-view__node-toggle" type="button" 
                 tabindex="-1" aria-labelledby="label-X">...icon...</button> 
         <button class="pf-v6-c-tree-view__node-text" type="button" 
                 tabindex="-1">Label</button> 
       </span> 
     </div> 
 
 See integration-tests/.../templates/components/tree-view/{single-selectable, 
 multiselectable, with-separate-selection-and-expansion}.html for working 
 examples of each pattern.