mintlify__docs/es/components/tree.mdx

---
title: "Árbol"
description: "Usa el componente de árbol para mostrar estructuras jerárquicas de archivos y carpetas con nodos plegables y resaltado de sintaxis para los nombres de ruta."
keywords: ["árbol", "árbol de archivos", "estructura de carpetas", "navegación jerárquica", "sistema de archivos"]
boost: 3
---

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.

Puedes crear árboles con una lista de Markdown o con los componentes `Tree.Folder` y `Tree.File`. `<Tree>` y `<FileTree>` son alias, por lo que cualquiera de las etiquetas funciona con cualquiera de las sintaxis.

Usa la sintaxis de lista de Markdown para árboles rápidos y estáticos en los que cada carpeta puede expandirse de forma predeterminada. Usa la sintaxis de componente cuando necesites controlar el estado de apertura de cada carpeta con `defaultOpen`, marcar carpetas como no interactivas con `openable`, o mezclar archivos y carpetas a una profundidad arbitraria.

<div id="markdown-list-syntax">
  ## Sintaxis de lista de Markdown
</div>

Escribe una lista de Markdown anidada dentro de `<FileTree>` (o `<Tree>`) para describir una estructura de carpetas. Añade una barra al final para indicar una carpeta o anida elementos debajo de ella. Las carpetas que contienen elementos anidados se expanden de forma predeterminada.

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

Deja una línea en blanco después de la etiqueta de apertura y antes de la de cierre para que la lista se procese como Markdown. El formato en línea como `` `código` ``, `**negrita**` o `_cursiva_` se elimina de los nombres, así que úsalos solo cuando se muestren correctamente en tu compilación.

<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="highlight-the-active-path">
  ## Resaltar la ruta activa
</div>

Añade la prop `highlight` a `Tree.File` o `Tree.Folder` para marcar el elemento actual. Úsala para destacar un archivo o una carpeta a los que se hace referencia en el texto cercano, como el archivo que la persona lectora debería abrir a continuación.

Resaltar una carpeta también tiñe a sus descendientes, de modo que la ruta activa se distingue incluso cuando la carpeta está expandida.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />

    <Tree.File name="page.tsx" highlight />

    <Tree.Folder name="api" defaultOpen highlight>
      <Tree.File name="route.ts" />
    </Tree.Folder>
  </Tree.Folder>

  <Tree.File name="package.json" />
</Tree>

```mdx Highlighted tree example
<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" highlight />
    <Tree.Folder name="api" defaultOpen highlight>
      <Tree.File name="route.ts" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>
```

### Personalizar el color de resaltado

El color de resaltado se expone mediante la variable CSS `--tree-highlight`. Establécela en el componente raíz `Tree` para sobrescribir el color de ese árbol.

```mdx Color de resaltado personalizado
<Tree style={{ "--tree-highlight": "rgb(59 130 246)" }}>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="page.tsx" highlight />
  </Tree.Folder>
</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="tree">
  ### Tree
</div>

<ResponseField name="className" type="string">
  Clases CSS adicionales para aplicar al contenedor del árbol.
</ResponseField>

<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 se expande de forma predeterminada.
</ResponseField>

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

<ResponseField name="highlight" type="boolean" default="false">
  Indica si la carpeta se resalta como el elemento activo. Los descendientes también se tiñen para reforzar la ruta activa.
</ResponseField>

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

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

<ResponseField name="highlight" type="boolean" default="false">
  Indica si el archivo se resalta como el elemento activo.
</ResponseField>