Tree

Nested lists and native details for hierarchical navigation. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• tree, tree-item, tree-disclosure, tree-summary, tree-branch, tree-row, tree-chevron, tree-spacer
• tree-icon, tree-label

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<ul class="tree" role="list">
  <li class="tree-item">
    <details class="tree-disclosure">
      <summary class="tree-summary">Documents</summary>
      <ul class="tree-branch" role="list">
        <li class="tree-item"><a class="tree-row" href="/docs/start">Getting started</a></li>
      </ul>
    </details>
  </li>
</ul>

Variants and composition

tree-disclosure wraps native details, while tree-summary is its summary. tree-branch nests another list; tree-chevron, tree-icon, tree-spacer, and tree-label align folders and leaves.

Behavior and accessibility

This is a nested list with native details, not an ARIA tree widget. Use links for destinations, role=list where marker removal affects semantics, and avoid role=tree without its keyboard model.

Reference

See the interactive Storybook specimen ↗. Continue to Components index or return to the Official preset overview.