Tree

Tree view for hierarchical data like file explorers.

Basic usage (with <details>/<summary>)

Documents

readme.txt

Images

photo.png

icon.svg

config.json

<div class="kit-tree">
  <details class="kit-tree-node" open>
    <summary>Documents</summary>
    <div class="kit-tree">
      <div class="kit-tree-item">
        <span class="kit-tree-label">readme.txt</span>
      </div>
      <details class="kit-tree-node">
        <summary>Images</summary>
        <div class="kit-tree">
          <div class="kit-tree-item">
            <span class="kit-tree-label">photo.png</span>
          </div>
        </div>
      </details>
    </div>
  </details>
  <div class="kit-tree-item">
    <span class="kit-tree-label">config.json</span>
  </div>
</div>

Selected item

Normal item

Selected item

<span class="kit-tree-label -selected">Selected item</span>

Compact

src

index.ts

main.scss

<div class="kit-tree -compact">
  ...
</div>