# Tree
Use trees to show file structures, docs layouts, and nested implementation folders.
Source: /docs/components/tree
Last modified: 2026-06-20
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`.


- app/


- layout.tsx


- page.tsx


- global.css


- lib/


- utils.ts


- db.ts


- package.json


- tsconfig.json


```mdx title="tree-basic.mdx"


- app/


- layout.tsx


- page.tsx


- global.css


- lib/


- utils.ts


- db.ts


- package.json


- tsconfig.json


```

## Nested folders

Create deeply nested structures by nesting `Tree.Folder` components.


- app/


- layout.tsx


- page.tsx


- api/


- auth/


- route.ts


- route.ts


- components/


- button.tsx


- dialog.tsx


- tabs.tsx


- package.json


```mdx title="tree-nested.mdx"


- app/


- layout.tsx


- page.tsx


- api/


- auth/


- route.ts


- route.ts


- components/


- button.tsx


- dialog.tsx


- tabs.tsx


- package.json


```

## Plandalf docs tree


- content/


- docs/


- quickstart.mdx


- api/


- authentication.mdx


```mdx title="tree-example.mdx"


- content/


- docs/


- quickstart.mdx


- api/


- authentication.mdx


```

## 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.


- public/


- checkout.html


- success.html


- src/


- lib/


- plandalf-client.js


- server/


- create-session.js


- webhook-handler.js


```mdx title="implementation-tree.mdx"


- public/


- checkout.html


- success.html


- src/


- server/


- create-session.js


- webhook-handler.js


```

## Locked folders

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


- docs/


- introduction.mdx


- quickstart.mdx


```mdx title="locked-tree-folder.mdx"


- docs/


- introduction.mdx


- quickstart.mdx


```

## Keyboard behavior


### Tree keyboard support


- `Arrow Up / Arrow Down` (navigation):
    Moves between visible file and folder nodes.


- `Arrow Right` (expand or enter):
    Opens a folder or moves into its first child when it is already open.


- `Arrow Left` (collapse or parent):
    Collapses an open folder or moves focus to the parent folder.


- `Home / End` (jump):
    Jumps to the first or last visible node.


- `Enter / Space` (toggle):
    Opens or closes the focused folder when the folder is openable.


- `*` (expand siblings):
    Opens all sibling folders at the focused level.


- `Typing` (typeahead):
    Focuses the next visible node whose label starts with the typed characters.


## Properties

### Tree.Folder


- `name` (string; required):
  The folder name displayed in the tree.


- `defaultOpen` (boolean; default: false):
  Opens the folder on first render.


- `openable` (boolean; default: true):
  Whether the folder can be opened and closed. Set to `false` for always-open structural folders.


### Tree.File


- `name` (string; required):
  The file name displayed in the tree.


## Plandalf extensions


- `title` (string):
  Optional heading shown above the file structure.


- `icon` (string):
  Icon name for a folder or file row. Folders default to `folder`; files default to `file-text`.


- `class | className` (string):
  Adds a class to the tree, folder, or file for rare layout-specific cases.


## Related


  - [Visual context](/docs/components/visual-context): Use visuals to explain implementation shape.
  - [Icons](/docs/components/icons): Use recognizable file icons.
  - [Frames](/docs/components/frames): Frame screenshots and media.