mintlify__docs/es/components/tree.mdx

---
title: "Árbol"
description: "Utiliza componentes de árbol para mostrar estructuras jerárquicas de archivos y carpetas."
keywords: ["árbol", "árbol de archivos", "estructura de carpetas", "navegación jerárquica", "sistema de archivos"]
---

Utiliza componentes de árbol para mostrar estructuras jerárquicas como sistemas de archivos, directorios de proyectos o contenido anidado. El componente de árbol ofrece compatibilidad con navegación mediante teclado y funciones de accesibilidad.

<div id="basic-tree">
  ## Árbol básico
</div>

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


<div id="nested-folders">
  ## Carpetas anidadas
</div>

Crea estructuras de carpetas muy profundas anidando componentes `Tree.Folder` unos dentro de otros.

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


<div id="keyboard-navigation">
  ## Navegación con el teclado
</div>

El componente de árbol admite la navegación con el teclado.

- **Teclas de flecha**: Navega hacia arriba y hacia abajo por los elementos visibles.
- **Flecha derecha**: Expande una carpeta cerrada o se desplaza al primer elemento hijo de una carpeta abierta.
- **Flecha izquierda**: Contrae una carpeta abierta o se desplaza a la carpeta padre.
- **Inicio (Home)**: Salta al primer elemento del árbol.
- **Fin (End)**: Salta al último elemento visible del árbol.
- **Enter/Espacio**: Alterna el estado de la carpeta entre abierta y cerrada.
- **\***: Expande todas las carpetas del mismo nivel en el nivel actual.
- **Búsqueda incremental**: Escribe caracteres para saltar a los elementos que comienzan con esos caracteres.

<div id="properties">
  ## Propiedades
</div>

<div id="treefolder">
  ### Tree.Folder
</div>

<ResponseField name="name" type="string" required>
  El nombre de la carpeta que se muestra en el árbol.
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">
  Indica si la carpeta está expandida de forma predeterminada.
</ResponseField>

<ResponseField name="openable" type="boolean" default="true">
  Indica si la carpeta se puede abrir y cerrar. Configúralo en false para carpetas no interactivas.
</ResponseField>

<div id="treefile">
  ### Tree.File
</div>

<ResponseField name="name" type="string" required>
  El nombre del archivo que se muestra en el árbol.
</ResponseField>