Code & changes / File structure
File tree
Show where files and directories live as a hierarchy, rather than a collection of paths.
Basic usage
- src/
- index.css
- components/
- chip.css
- table.css
HTML
<ul class="filetree">
<li class="filetree-directory is-open"><span>src/</span><ul>
<li class="filetree-file"><span>index.css</span><span class="filetree-meta">entry point</span></li>
<li class="filetree-directory is-open"><span>components/</span><ul><li class="filetree-file"><span>chip.css</span></li><li class="filetree-file"><span>table.css</span></li></ul></li>
</ul></li>
</ul>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.filetree | A file hierarchy made of nested lists. |
.filetree-directory / .filetree-file / .filetree-meta | Directory entries, file entries, and supplementary metadata. |
.is-current | The file currently being discussed. |
Usage notes
Use nested lists instead of drawing branches with text characters. Names remain selectable and searchable.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.