File Tree Component
A built-in component to visually represent a file tree.
Example
Click the folder to test the dynamic functionality of the file tree.
- _meta.json
- contact.md
- index.mdx
Usage
Create the file tree structure by nesting <FileTree.Folder>
and <FileTree.File>
components within a <FileTree>
. Name each file or folder with the name
attribute. Use defaultOpen
to set the folder to open on load.
Markdown
import { FileTree } from 'nextra/components'
<FileTree>
<FileTree.Folder name="pages" defaultOpen>
<FileTree.File name="_meta.json" />
<FileTree.File name="contact.md" />
<FileTree.File name="index.mdx" />
<FileTree.Folder name="about">
<FileTree.File name="_meta.json" />
<FileTree.File name="legal.md" />
<FileTree.File name="index.mdx" />
</FileTree.Folder>
</FileTree.Folder>
</FileTree>