Tree View
A nested file or folder hierarchy built from
<ul>, <li>, and native
<details>/<summary>
disclosures, using class="tree".
Default
Wrap each folder in a <details> containing a
<summary> and a nested <ul>.
Icons come from the markup: drop an <svg> before
the text in a <summary> or <li>.
Give a <summary> two icons and the first shows
while closed, the second while open. Files are plain
<li> items with no <details>.
Expand and collapse works natively, no JavaScript required.
-
node_modules
- zag-js
-
@types
-
src
<ul class="tree">
<li>
<details>
<summary>
<svg><!-- folder --></svg>
<svg><!-- folder-open --></svg>
node_modules
</summary>
<ul>
<li>
<a href="#" class="button ghost">
<svg><!-- file --></svg> zag-js
</a>
</li>
<li>
<button class="ghost">
<svg><!-- file --></svg> panda
</button>
</li>
<li>
<details>
<summary>
<svg><!-- folder --></svg>
<svg><!-- folder-open --></svg>
@types
</summary>
<ul>
<li>
<button class="ghost">
<svg><!-- file --></svg> react
</button>
</li>
<li>
<button class="ghost">
<svg><!-- file --></svg> react-dom
</button>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li>
<button class="ghost">
<svg><!-- file --></svg> package.json
</button>
</li>
<li>
<button class="ghost">
<svg><!-- file --></svg> README.md
</button>
</li>
</ul>Open by default
Add the open attribute to any
<details>
to expand it by default, same as the
Accordion component.
-
components
<ul class="tree">
<li>
<details open>
<summary>
<svg><!-- folder --></svg>
<svg><!-- folder-open --></svg>
components
</summary>
<ul>
<li>
<svg><!-- file --></svg> button.tsx
</li>
<li>
<svg><!-- file --></svg> input.tsx
</li>
</ul>
</details>
</li>
</ul>