mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
skeptrune
9200586a3a
* docs: boost search ranking for single-word title pages Apply `boost: 3` to English pages whose H1 / frontmatter title is a single word (e.g. "Assistant", "Quickstart", "Cards"). Short titles tend to be canonical landing pages for a topic, so users searching the exact term should land on them first. * docs: drop boost on websocket-playground stub to keep canonical Playground ranking `api-playground/websocket-playground.mdx` is an auto-generated AsyncAPI stub with no body content but shares the title "Playground" with `api-playground/overview.mdx`. Boosting both equally diluted the canonical overview page in search for the query "playground". Drop the boost on the stub.
120 lines
3.5 KiB
Plaintext
120 lines
3.5 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.
|
|
|
|
## 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 is expanded by default.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="openable" type="boolean" default="true">
|
|
Whether the folder can be opened and closed. 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>
|