mintlify__docs/components/tree.mdx

---
title: "Tree"
description: "Use the tree component to display hierarchical file and folder structures with collapsible nodes and syntax highlighting for path names."
keywords: ["tree", "file tree", "folder structure", "hierarchical navigation", "file system"]
boost: 3
---

Use tree components to display hierarchical structures like file systems, project directories, or nested content. The tree component supports keyboard navigation and accessibility features.

## Basic tree

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

```mdx Tree example
<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 within each other.

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

```mdx Nested folders example
<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>
```

## Keyboard navigation

The tree component supports keyboard navigation.

- **Arrow keys**: Navigate up and down through visible items.
- **Right arrow**: Expand a closed folder or move to the first child of an open folder.
- **Left arrow**: Collapse an open folder or move to the parent folder.
- **Home**: Jump to the first item in the tree.
- **End**: Jump to the last visible item in the tree.
- **Enter/Space**: Toggle folder open/closed state.
- **\***: Expand all sibling folders at the current level.
- **Type-ahead search**: Type characters to jump to items that start with those characters.

## Properties

### Tree.Folder

<ResponseField name="name" type="string" required>
  The name of the folder displayed in the tree.
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">
  Whether the folder expands by default.
</ResponseField>

<ResponseField name="openable" type="boolean" default="true">
  Whether users can open and close the folder. Set to false for non-interactive folders.
</ResponseField>

### Tree.File

<ResponseField name="name" type="string" required>
  The name of the file displayed in the tree.
</ResponseField>