Tree

Expanding is done by <details>: it works from the keyboard, survives printing, and costs not a line of JavaScript.

A file tree

Click a folder to expand it.

• docpensieve.config.mjs
• docs

  • v1.0

    • index.md
    • guide

      • installation.md
      • configuration.md
    • components

      • card.mdx
      • tree.mdx
• dist

<Tree>
  <TreeItem label="docs" open>
    <TreeItem label="index.md" />
  </TreeItem>
</Tree>

Branch or leaf

The difference is read from the writing, with no prop to set: an entry with children is a collapsible branch, an entry without children is a leaf. open expands the branch as soon as the page opens.

A plain list

Without any branch, the tree becomes a monospaced list — useful to list produced files.

• index.html
• versions.json
• assets/docpensieve.css

Something that is not a file

Nothing forces you to describe a file tree. A data structure reads just as well.

• config

  • projectName : string
  • siteUrl : string
  • versions

    • slug : string
    • current : boolean
    • prerelease : boolean
  • theme

    • framework : 'tailwind' | 'custom'
    • tokens : Record<string, string>

A composite label

label accepts content, not just text.

• 📦 package

  • index.js
  • types — generated

<TreeItem
  label={
    <span>
      📦 <strong>package</strong>
    </span>
  }
>
  …
</TreeItem>

One caveat: what is written between braces is an expression, and the compiler does not read it — its result only exists at render time. A URL placed there is therefore not rewritten and will ignore the deployment prefix. For a link in a label, write the full URL.

Styling the tree

• in colour

  • the children inherit

<Tree className="text-indigo-700 dark:text-indigo-300">…</Tree>

What it does not announce

The structure is a nested list, not a role="tree". That role promises a screen reader arrow-key navigation that nothing here would implement: announcing it would lie about what the page can do.

A TreeItem written outside a Tree is refused — it would produce an <li> outside any list, invalid HTML that no browser reports. An entry without a label is refused too.

A tree is how this documentation shows the shape of a project. What those folders become once built — the order, the addresses — is in Writing pages.

Properties

TreeItem:

Tree takes className and style.