Tree view

Native details/summary folders, rotating carets, and file leaves in monospace.

snippets
- ui
  - tree-view.html
  - meter.html
- animation
  - drop-in.html

Widely Supported

uino-js

Quick implementation

summary.tv-sum { list-style: none; display: flex; gap: 0.4rem; }
summary.tv-sum::-webkit-details-marker { display: none; }
.tv-tree ul {
  border-left: 1px solid var(--card-border);
  margin-left: 0.35rem;
  padding-left: 1rem;
}

Prompt this to your LLM

details/summary avoids JS toggles.

Create a file tree navigator.

Containers: .tree-view-demo, .tree-view-card.
Nested details.tv-node with summary.tv-sum, ul children, file rows with code filenames.
Style caret via summary::before.

Return HTML + CSS.

Why this matters in 2026

Docs sites still mirror repo structure; native disclosure keeps bundles small compared to heavy tree widgets.

The logic

Left border on nested uls draws continuity; rotating ▸ hints open state without icons assets.

Accessibility & performance

Keyboard users get Enter/Space toggles for free; add aria-expanded only if you replace summary with custom buttons.