A nested file or folder hierarchy built from
<ul>, <li>, and native
<details>/<summary>
disclosures, using class="tree".
Works with
Button- File rows, as ghost buttons or links
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/tree-view.css" />Default
Wrap each folder in a <details> holding a
<summary> and a nested <ul>.
Files are plain <li> items with no
<details>, and expanding works natively.
Icons come from the markup. Put 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.
-
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>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| State | [open] |
On a details element, expands the branch and swaps to its second icon |