Tree

Use a <ul class="tree"> of nested lists for file browsers and deep navigation. Each branch is a <details>, and its <summary> is the row. Each leaf is a link.

Mark the current row with aria-current. Each level draws a guide line down from its parent's chevron. Wrap a tree of links in a named <nav>.

<nav aria-label="Files">
  <ul class="tree">
    <li>
      <details open>
        <summary>src</summary>
        <ul>
          <li><a href="/src/index.ts" aria-current="page">index.ts</a></li>
          <li>
            <details>
              <summary>components</summary>
              <ul>
                <li><a href="/src/components/menu.ts">menu.ts</a></li>
              </ul>
            </details>
          </li>
        </ul>
      </details>
    </li>
    <li><a href="/README.md">README.md</a></li>
  </ul>
</nav>

Keyboard

The rows are native disclosures and links, so every row is a Tab stop and Enter or Space opens a branch. Don't add role="tree". That role promises arrow-key navigation between rows, and native disclosures don't provide it.

Tokens

Override these on the .tree.