53Tree
Nested, expandable structure — a metadata explorer, a repo of examples, nested categories. Every branch is a native <details>, so the component ships no JS at all.
Use it for
- Hierarchy the reader browses rather than searches
- Two or three levels; a file or metadata explorer
Not for
- Flat navigation — use Docs sidebar
- Deeper than three levels — the indent eats the label and it wants to be a search box
- A curriculum — that has its own component with progress
Metadata explorer
objects
classes
markup
<ul class="ns-tree">
<li><details class="ns-tree__branch" open>
<summary><i class="ph ph-caret-right ns-tree__twist" aria-hidden="true"></i><i class="ph ph-folder-open ns-tree__icon" aria-hidden="true"></i><span class="ns-tree__label">objects</span><span class="ns-tree__meta">3</span></summary>
<ul>
<li><a class="ns-tree__node" href="#0" aria-current="true"><i class="ph ph-file-text ns-tree__icon" aria-hidden="true"></i><span class="ns-tree__label">Opportunity.object</span></a></li>
<li><a class="ns-tree__node" href="#0"><i class="ph ph-file-text ns-tree__icon" aria-hidden="true"></i><span class="ns-tree__label">Account.object</span></a></li>
</ul>
</details></li>
<li><details class="ns-tree__branch">
<summary><i class="ph ph-caret-right ns-tree__twist" aria-hidden="true"></i><i class="ph ph-folder-open ns-tree__icon" aria-hidden="true"></i><span class="ns-tree__label">classes</span><span class="ns-tree__meta">12</span></summary>
<ul><li><a class="ns-tree__node" href="#0"><i class="ph ph-brackets-curly ns-tree__icon" aria-hidden="true"></i><span class="ns-tree__label">GreetingService.cls</span></a></li></ul>
</details></li>
</ul>Accessibility contract
- Open/closed state, keyboard operation and in-page find all come from <details>
- aria-current marks the active node — one attribute for both the highlight and the announcement
- Indentation is padding on the nested list, so a node's hover and focus ring still span the full rail; an indented hit area that starts 2rem in is one people miss