# Tree

Shows a file and folder structure. Click a folder to open or close it.

<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.Folder name="guides">
      <Tree.File name="quickstart.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="writedocs.json" highlight />
</Tree>

```mdx
<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.Folder name="guides">
      <Tree.File name="quickstart.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="writedocs.json" highlight />
</Tree>
```

## From a Markdown list

A nested list works too, inside `<Tree>` or its other name `<FileTree>`. A name ending in `/`, or with items nested under it, is a folder, and folders with items start open. Leave a blank line after the opening tag and before the closing one:

<FileTree>

- docs/
  - index.mdx
- writedocs.json

</FileTree>

```mdx
<FileTree>

- docs/
  - index.mdx
- writedocs.json

</FileTree>
```

## Highlight color

`highlight` marks a file or folder; a highlighted folder also colors everything inside it. The color is the page's primary color, or set your own on the tree with `style={{ "--tree-highlight": "rgb(59 130 246)" }}`.

## Keyboard

Up and Down move between visible items, Right opens a folder (or moves into it), Left closes it (or moves to its parent), Home and End jump to the first and last items, Enter and Space open or close a folder, `*` opens every folder next to the current one, and typing jumps to the next item whose name starts with those letters.

**`Tree.Folder` props**

<Parameter name="name" type="string" required />

<Parameter name="defaultOpen" type="boolean" default="false">
  Starts the folder open.
</Parameter>

<Parameter name="openable" type="boolean" default="true">
  Set to `false` for a folder that can't be opened or closed - it stays as `defaultOpen` sets it.
</Parameter>

<Parameter name="highlight" type="boolean">
  Marks the folder, and colors everything inside it.
</Parameter>

**`Tree.File` props**

<Parameter name="name" type="string" required />

<Parameter name="highlight" type="boolean">
  Marks the file.
</Parameter>