0.0.4

Tree View

A pure vanilla JS implementation of Zag JS Tree View Opens in a new window

Anatomy

The Tree View component consists of the following data-part

root tree branch branch-control branch-text branch-indicator branch-content branch-indent-guide item

It can include multiple branch, branch-control, branch-text, branch-indicator, branch-content, branch-indent-guide and item parts.

data-id and data-name are required on all branch parts and items

The collection is dynamically generated from the html structure of the item and branch parts

Tree View Label

Single Item
Branch
Nested Item
Sub Branch
Sub Nested Item
Nested Sub Branch
Nested Sub Nested Item 
<div class="tree-view-js tree-view">
                  <div data-part="root">
                  <h3 data-part="label" class="">Tree View Label</h3>
                  <div data-part="tree">
                  <div data-part="item" data-id="single" data-name="single">
                  Single Item
                  </div>
                  <div data-part="branch" data-id="branch" data-name="branch">
                  <div data-part="branch-control" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="branch" data-name="branch">Branch</span>
                  <span data-part="branch-indicator" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="branch" data-name="branch">
                  <div data-part="branch-indent-guide" data-id="branch" data-name="branch"></div>
                  <div data-part="item" data-id="nested-item" data-name="nested-item">
                  Nested Item
                  </div>
                  <div data-part="branch" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-control" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="sub-branch" data-name="sub-branch">Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-indent-guide" data-id="sub-branch" data-name="sub-branch"></div>
                  <div data-part="item" data-id="sub-nested-item" data-name="sub-nested-item">
                  Sub Nested Item
                  </div>
                  <div data-part="branch" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-control" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="nested-sub-branch" data-name="nested-sub-branch">Nested Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-indent-guide" data-id="nested-sub-branch" data-name="nested-sub-branch"></div>
                  <div data-part="item" data-id="nested-sub-nested-item" data-name="nested-sub-nested-item">
                  Nested Sub Nested Item
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

Data attributes

Each tree-view can be set with different settings with the following data-attribute.

Tree View Label

Single Item
Branch
Nested Item
Sub Branch
Sub Nested Item
Nested Sub Branch
Nested Sub Nested Item 
<div class="tree-view-js tree-view" data-default-expanded-value="branch, sub-branch" data-default-selected-value="single,sub-branch" data-dir="ltr" data-expand-on-click="true" data-focused-value="branch" data-selection-mode="multiple" data-selected-value="nested-item,single">
                  <div data-part="root">
                  <h3 data-part="label" class="">Tree View Label</h3>
                  <div data-part="tree">
                  <div data-part="item" data-id="single" data-name="single">
                  Single Item
                  </div>
                  <div data-part="branch" data-id="branch" data-name="branch">
                  <div data-part="branch-control" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="branch" data-name="branch">Branch</span>
                  <span data-part="branch-indicator" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="branch" data-name="branch">
                  <div data-part="branch-indent-guide" data-id="branch" data-name="branch"></div>
                  <div data-part="item" data-id="nested-item" data-name="nested-item">
                  Nested Item
                  </div>
                  <div data-part="branch" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-control" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="sub-branch" data-name="sub-branch">Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-indent-guide" data-id="sub-branch" data-name="sub-branch"></div>
                  <div data-part="item" data-id="sub-nested-item" data-name="sub-nested-item">
                  Sub Nested Item
                  </div>
                  <div data-part="branch" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-control" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="nested-sub-branch" data-name="nested-sub-branch">Nested Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-indent-guide" data-id="nested-sub-branch" data-name="nested-sub-branch"></div>
                  <div data-part="item" data-id="nested-sub-nested-item" data-name="nested-sub-nested-item">
                  Nested Sub Nested Item
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
Data attribute Type / Options Description
id string The unique id of the component. Default generated if none is provided
data-default-expanded-value string || string list The initial expanded node ids when rendered. Use when you don't need to control the expanded node ids. Separated by comma
data-default-selected-value string || string list The initial selected node ids when rendered. Use when you don't need to control the selected node ids. Separated by comma
data-dir ltr | rtl The orientation of the tree-view. Can be `ltr` or `rtl`
data-expanded-value boolean The controlled expanded node ids. Separated by comma
data-expand-on-click boolean Whether clicking on a branch should open it or not
data-focused-value string || string list The id of the focused node. Separated by comma
data-selection-mode "single" || "multiple" Whether the tree supports multiple selection. "single": only one node can be selected. "multiple": multiple nodes can be selected
data-selected-value string || string list The controlled selected node ids. Separated by comma
data-typeahead boolean Whether the tree supports typeahead search

Callbacks

Each Tree View component can receive callbacks that can be used to respond to user interaction with custom behavior.

You must add a custom id for the toggle group and a event listener for your event name


                      document.getElementById("my-callback-tree-view")
                      ?.addEventListener("my-callback-tree-view-event", (event) => {
                        console.log("Received event:", (event as CustomEvent).detail);
                      });

Tree View Label

Single Item
Branch
Nested Item
Sub Branch
Sub Nested Item
Nested Sub Branch
Nested Sub Nested Item 
<div class="tree-view-js tree-view" id="my-callback-tree-view" data-on-expanded-change="my-callback-tree-view-event">
                  <div data-part="root">
                  <h3 data-part="label" class="">Tree View Label</h3>
                  <div data-part="tree">
                  <div data-part="item" data-id="single" data-name="single">
                  Single Item
                  </div>
                  <div data-part="branch" data-id="branch" data-name="branch">
                  <div data-part="branch-control" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="branch" data-name="branch">Branch</span>
                  <span data-part="branch-indicator" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="branch" data-name="branch">
                  <div data-part="branch-indent-guide" data-id="branch" data-name="branch"></div>
                  <div data-part="item" data-id="nested-item" data-name="nested-item">
                  Nested Item
                  </div>
                  <div data-part="branch" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-control" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="sub-branch" data-name="sub-branch">Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-indent-guide" data-id="sub-branch" data-name="sub-branch"></div>
                  <div data-part="item" data-id="sub-nested-item" data-name="sub-nested-item">
                  Sub Nested Item
                  </div>
                  <div data-part="branch" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-control" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="nested-sub-branch" data-name="nested-sub-branch">Nested Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-indent-guide" data-id="nested-sub-branch" data-name="nested-sub-branch"></div>
                  <div data-part="item" data-id="nested-sub-nested-item" data-name="nested-sub-nested-item">
                  Nested Sub Nested Item
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

Open your browser's console to see the events received when the tree is opened or closed

Data attribute Type / Options Description
data-on-expanded-change string Event name to be send when the tree is opened or closed
data-on-focus-change string Event name to be send when the focused node changes
data-on-selection-change string Event name to be send when the selection changes

RTL

RTL support for tree-view

Tree View Label

Single Item
Branch
Nested Item
Sub Branch
Sub Nested Item
Nested Sub Branch
Nested Sub Nested Item 
<div class="tree-view-js tree-view" data-dir="rtl">
                  <div data-part="root">
                  <h3 data-part="label" class="">Tree View Label</h3>
                  <div data-part="tree">
                  <div data-part="item" data-id="single" data-name="single">
                  Single Item
                  </div>
                  <div data-part="branch" data-id="branch" data-name="branch">
                  <div data-part="branch-control" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="branch" data-name="branch">Branch</span>
                  <span data-part="branch-indicator" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="branch" data-name="branch">
                  <div data-part="branch-indent-guide" data-id="branch" data-name="branch"></div>
                  <div data-part="item" data-id="nested-item" data-name="nested-item">
                  Nested Item
                  </div>
                  <div data-part="branch" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-control" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="sub-branch" data-name="sub-branch">Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-indent-guide" data-id="sub-branch" data-name="sub-branch"></div>
                  <div data-part="item" data-id="sub-nested-item" data-name="sub-nested-item">
                  Sub Nested Item
                  </div>
                  <div data-part="branch" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-control" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="nested-sub-branch" data-name="nested-sub-branch">Nested Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-indent-guide" data-id="nested-sub-branch" data-name="nested-sub-branch"></div>
                  <div data-part="item" data-id="nested-sub-nested-item" data-name="nested-sub-nested-item">
                  Nested Sub Nested Item
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

Custom (Tailwind)

If you are using Tailwind styling, you can customize each tree-view and its parts with Tailwind utilities

Tree View Label

Single Item
Branch
Nested Item
Sub Branch
Sub Nested Item
Nested Sub Branch
Nested Sub Nested Item 
<div class="tree-view-js tree-view">
                  <div data-part="root" class="bg-red-5 shadow-xl border-2 rounded-xl">
                  <h3 data-part="label" class="text-contrast-brand m-2">Tree View Label</h3>
                  <div data-part="tree" class="bg-yellow-5 shadow-xl border-2 rounded-xl">
                  <div data-part="item" class="border-2 rounded-xl border-red-3" data-id="single" data-name="single">
                  Single Item
                  </div>
                  <div data-part="branch" data-id="branch" data-name="branch">
                  <div data-part="branch-control" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="branch" data-name="branch">Branch</span>
                  <span data-part="branch-indicator" data-id="branch" data-name="branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="branch" data-name="branch">
                  <div data-part="branch-indent-guide" data-id="branch" data-name="branch"></div>
                  <div data-part="item" data-id="nested-item" data-name="nested-item">
                  Nested Item
                  </div>
                  <div data-part="branch" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-control" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="sub-branch" data-name="sub-branch" class="text-blue-700 font-semibold">Sub Branch</span>
                  <span data-part="branch-indicator" data-id="sub-branch" data-name="sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="sub-branch" data-name="sub-branch">
                  <div data-part="branch-indent-guide" data-id="sub-branch" data-name="sub-branch"></div>
                  <div data-part="item" data-id="sub-nested-item" data-name="sub-nested-item">
                  Sub Nested Item
                  </div>
                  <div data-part="branch" data-id="nested-sub-branch" data-name="nested-sub-branch" class="text-blue-800">
                  <div data-part="branch-control" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>
                  </svg>
                  <span data-part="branch-text" data-id="nested-sub-branch" data-name="nested-sub-branch">Nested Sub
                  Branch</span>
                  <span data-part="branch-indicator" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </span>
                  </div>
                  <div data-part="branch-content" data-id="nested-sub-branch" data-name="nested-sub-branch">
                  <div data-part="branch-indent-guide" data-id="nested-sub-branch" data-name="nested-sub-branch"></div>
                  <div data-part="item" data-id="nested-sub-nested-item" data-name="nested-sub-nested-item">
                  Nested Sub Nested Item
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

Templates

Tree View components is available in the followng templates

Toggle Group Typo