mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4930865207
* docs: document Markdown list syntax and FileTree alias for Tree component * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
150 lines
4.3 KiB
Plaintext
150 lines
4.3 KiB
Plaintext
---
|
|
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.
|
|
|
|
Create trees with either a Markdown list or the `Tree.Folder` and `Tree.File` components. `<Tree>` and `<FileTree>` are aliases, so either tag works with either syntax.
|
|
|
|
## Markdown list syntax
|
|
|
|
Write a nested Markdown list inside `<FileTree>` (or `<Tree>`) to describe a folder structure. Add a trailing slash to mark a folder, or nest items under it. Folders that contain nested items expand by default.
|
|
|
|
<FileTree>
|
|
|
|
- docs/
|
|
- index.mdx
|
|
- guides/
|
|
- configuration.mdx
|
|
- docs.config.ts
|
|
|
|
</FileTree>
|
|
|
|
````mdx File tree example
|
|
<FileTree>
|
|
|
|
- docs/
|
|
- index.mdx
|
|
- guides/
|
|
- configuration.mdx
|
|
- docs.config.ts
|
|
|
|
</FileTree>
|
|
````
|
|
|
|
Leave a blank line after the opening tag and before the closing tag so that the list parses as Markdown. Names strip inline formatting like `` `code` ``, `**bold**`, or `_italic_`.
|
|
|
|
## 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>
|