Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

The FileTree component renders an interactive, tree-structured visualization of a file system layout. It is composed of three parts exported from the same FileTree object: the root FileTree wrapper, FileTree.Folder for directories, and FileTree.File for individual files. Folders are collapsible — clicking them toggles their open state — and both files and folders can be highlighted as “active” to draw attention to a specific item.

​
Import

import { FileTree } from 'nextra/components'

​
Props

​
<FileTree>

The root container accepts all standard HTML <ul> attributes.
PropTypeDescription
childrenReactNodeFileTree.Folder and FileTree.File elements.
classNamestringAdditional CSS class names for the root list element.

​
<FileTree.Folder>

PropTypeDefaultDescription
nameReactNode—Required. The folder name displayed in the tree.
defaultOpenbooleanfalseWhen true, the folder is expanded on initial render.
openboolean—Controlled open state. When provided, the folder cannot be toggled by the user.
activeboolean—Highlights the folder name with the primary theme colour.
childrenReactNode—Nested FileTree.Folder and FileTree.File elements.

​
<FileTree.File>

PropTypeDefaultDescription
nameReactNode—Required. The file name displayed in the tree.
activeboolean—Highlights the file name with the primary theme colour.

​
Usage

​
Basic File Tree

import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="index.mdx" active />
    <FileTree.Folder name="about">
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>

​
Nested Folders

Folders can be nested to any depth. By default all folders are collapsed; use defaultOpen on the folders you want pre-expanded. 
import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="my-nextra-app" defaultOpen>
    <FileTree.Folder name="app" defaultOpen>
      <FileTree.File name="layout.tsx" />
      <FileTree.File name="page.mdx" />
    </FileTree.Folder>
    <FileTree.Folder name="public">
      <FileTree.File name="favicon.ico" />
    </FileTree.Folder>
    <FileTree.File name="next.config.mjs" />
    <FileTree.File name="package.json" />
    <FileTree.File name="tsconfig.json" />
  </FileTree.Folder>
</FileTree>

​
Highlighting Active Files

Use the active prop on any <FileTree.File> or <FileTree.Folder> to emphasise a particular item — useful when describing changes to a specific file in a step-by-step guide. 
import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="content" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="contact.md" />
    <FileTree.File name="index.mdx" active />
    <FileTree.Folder name="about">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="legal.md" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>

​
Controlled Open State

Pass an explicit open prop to lock a folder in a fixed expanded or collapsed state regardless of user interaction. This is useful for diagrams where you want to illustrate a specific layout without allowing the tree to be modified. 
import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="src" open={true}>
    <FileTree.File name="index.ts" />
  </FileTree.Folder>
  <FileTree.Folder name="dist" open={false}>
    <FileTree.File name="index.js" />
  </FileTree.Folder>
</FileTree>
A folder with an explicit open prop renders without a click handler — the toggle button is disabled — so the user cannot change its state.

​
Complete Example

The following tree illustrates the recommended Nextra project structure and highlights the config file: 
import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="my-nextra-app" defaultOpen>
    <FileTree.Folder name="app" defaultOpen>
      <FileTree.Folder name="docs" defaultOpen>
        <FileTree.File name="[[...slug]]" />
        <FileTree.File name="page.mdx" />
      </FileTree.Folder>
      <FileTree.File name="layout.tsx" />
    </FileTree.Folder>
    <FileTree.Folder name="content">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
    <FileTree.File name="next.config.mjs" active />
    <FileTree.File name="package.json" />
  </FileTree.Folder>
</FileTree>

Build docs developers (and LLMs) love

Get started for freeTalk to us