Tree

Trees make project structure scannable. They support keyboard navigation and collapsible folders.

Basic example

Mintlify uses compound tree nodes: Tree.Folder and Tree.File. Plandalf supports those aliases alongside TreeFolder and TreeFile.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.File name="global.css" />
  </Tree.Folder>
  <Tree.Folder name="lib">
    <Tree.File name="utils.ts" />
    <Tree.File name="db.ts" />
  </Tree.Folder>
  <Tree.File name="package.json" />
  <Tree.File name="tsconfig.json" />
</Tree>

Nested folders

Create deeply nested structures by nesting Tree.Folder components.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.Folder name="api" defaultOpen>
      <Tree.Folder name="auth">
        <Tree.File name="route.ts" />
      </Tree.Folder>
      <Tree.File name="route.ts" />
    </Tree.Folder>
    <Tree.Folder name="components">
      <Tree.File name="button.tsx" />
      <Tree.File name="dialog.tsx" />
      <Tree.File name="tabs.tsx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>

Plandalf docs tree

<Tree title="Docs structure">
  <TreeFolder name="content" defaultOpen>
    <TreeFolder name="docs" defaultOpen>
      <TreeFile name="quickstart.mdx" icon="file-text" />
      <TreeFolder name="api">
        <TreeFile name="authentication.mdx" icon="file-text" />
      </TreeFolder>
    </TreeFolder>
  </TreeFolder>
</Tree>

Implementation tree

Use trees to show where files belong before giving the full code. Folder nodes can start open or closed, and files can use icons that match the content.

<Tree title="Custom HTML install">
  <TreeFolder name="public" defaultOpen>
    <TreeFile name="checkout.html" icon="code" />
    <TreeFile name="success.html" icon="check-circle" />
  </TreeFolder>
  <TreeFolder name="src" defaultOpen>
    <TreeFolder name="server">
      <TreeFile name="create-session.js" icon="terminal" />
      <TreeFile name="webhook-handler.js" icon="webhook" />
    </TreeFolder>
  </TreeFolder>
</Tree>

Locked folders

Use openable={false} when a folder is structural and should always stay open.

<Tree title="Always-visible folder">
  <TreeFolder name="docs" openable={false}>
    <TreeFile name="introduction.mdx" icon="file-text" />
    <TreeFile name="quickstart.mdx" icon="file-text" />
  </TreeFolder>
</Tree>

Keyboard behavior

Tree keyboard support

Arrow Up / Arrow Downnavigation

Moves between visible file and folder nodes.

Arrow Rightexpand or enter

Opens a folder or moves into its first child when it is already open.

Arrow Leftcollapse or parent

Collapses an open folder or moves focus to the parent folder.

Home / Endjump

Jumps to the first or last visible node.

Enter / Spacetoggle

Opens or closes the focused folder when the folder is openable.

*expand siblings

Opens all sibling folders at the focused level.

Typingtypeahead

Focuses the next visible node whose label starts with the typed characters.

Properties

Tree.Folder

Tree.File

Plandalf extensions

Related