Skip to content

Update from code changes: document Tree highlight prop #6843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mintlify wants to merge 4 commits into
base: main
Choose a base branch
from
+215 −3
Open

Update from code changes: document Tree highlight prop #6843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
760f581
docs: document Tree highlight prop
mintlify[bot] Jul 31, 2026
03d0d7e
docs: translate Tree highlight docs to Chinese
mintlify[bot] Jul 31, 2026
9ed4b0d
docs: document Tree highlight CSS variables
mintlify[bot] Jul 31, 2026
3a8df61
docs: correct Tree highlight variable to --tree-highlight on Tree root
mintlify[bot] Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
<Tree.Folder name="components">
<Tree.File name="button.tsx" />
<Tree.File name="dialog.tsx" />
<Tree.File name="tabs.tsx" />

Check warning on line 91 in components/tree.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tree.mdx#L91 

'e.F' should have one space.
</Tree.Folder>
</Tree.Folder>
<Tree.File name="package.json" />
Expand All @@ -99,7 +99,7 @@
<Tree.Folder name="app" defaultOpen>
<Tree.File name="layout.tsx" />
<Tree.File name="page.tsx" />
<Tree.Folder name="api" defaultOpen>

Check warning on line 102 in components/tree.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tree.mdx#L102 

'e.F' should have one space.
<Tree.Folder name="auth">
<Tree.File name="route.ts" />
</Tree.Folder>
Expand All @@ -115,6 +115,48 @@
</Tree>
```

## Highlight the active path

Add the `highlight` prop to `Tree.File` or `Tree.Folder` to mark the current item. Use it to draw attention to a file or folder you reference in nearby prose, such as the file a reader should open next.

Highlighting a folder also tints its descendants, so the active path stands out even when the folder is expanded.

Check warning on line 122 in components/tree.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tree.mdx#L122 

In general, use active voice instead of passive voice ('is expanded').

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

### Customize the highlight color

The highlight color is exposed as the `--tree-highlight` CSS variable. Set it on the `Tree` root component to override the color for that tree.

Check warning on line 150 in components/tree.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tree.mdx#L150 

In general, use active voice instead of passive voice ('is exposed').

```mdx Custom highlight color
<Tree style={{ "--tree-highlight": "rgb(59 130 246)" }}>
<Tree.Folder name="app" defaultOpen>
<Tree.File name="page.tsx" highlight />
</Tree.Folder>
</Tree>
```

## Keyboard navigation

The tree component supports keyboard navigation.
Expand Down Expand Up @@ -144,8 +186,16 @@
Whether users can open and close the folder. Set to false for non-interactive folders.
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
Whether to highlight the folder as the active item. Descendants are tinted to reinforce the active path.

Check warning on line 190 in components/tree.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/tree.mdx#L190 

In general, use active voice instead of passive voice ('are tinted').
</ResponseField>

### Tree.File

<ResponseField name="name" type="string" required>
The name of the file displayed in the tree.
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
Whether to highlight the file as the active item.
</ResponseField>
56 changes: 55 additions & 1 deletion es/components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,54 @@ Crea estructuras de carpetas muy profundas anidando componentes `Tree.Folder` un
```


<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>
Expand Down Expand Up @@ -171,6 +219,10 @@ El componente de árbol admite la navegación con el teclado.
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>
Expand All @@ -179,4 +231,6 @@ El componente de árbol admite la navegación con el teclado.
El nombre del archivo que se muestra en el árbol.
</ResponseField>

`Tree.File` solo acepta la prop `name`.
<ResponseField name="highlight" type="boolean" default="false">
Indica si el archivo se resalta como el elemento activo.
</ResponseField>
56 changes: 55 additions & 1 deletion fr/components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,54 @@ Créez des structures profondément imbriquées en imbriquant des composants `Tr
```


<div id="highlight-the-active-path">
## Mettre en évidence le chemin actif
</div>

Ajoutez la prop `highlight` à `Tree.File` ou `Tree.Folder` pour marquer l’élément actuel. Utilisez-la pour attirer l’attention sur un fichier ou un dossier auquel vous faites référence dans le texte voisin, comme le fichier que le lecteur doit ouvrir ensuite.

Mettre en évidence un dossier teinte également ses descendants, afin que le chemin actif se distingue même lorsque le dossier est développé.

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

### Personnaliser la couleur de mise en évidence

La couleur de mise en évidence est exposée via la variable CSS `--tree-highlight`. Définissez-la sur le composant racine `Tree` pour redéfinir la couleur de cette arborescence.

```mdx Couleur de mise en évidence personnalisée
<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">
## Navigation au clavier
</div>
Expand Down Expand Up @@ -171,6 +219,10 @@ Le composant d’arborescence prend en charge la navigation au clavier.
Indique si les utilisateurs peuvent ouvrir et fermer le dossier. Réglez cette valeur sur false pour les dossiers non interactifs.
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
Indique si le dossier est mis en évidence comme élément actif. Les descendants sont également teintés pour renforcer le chemin actif.
</ResponseField>

<div id="treefile">
### Tree.File
</div>
Expand All @@ -179,4 +231,6 @@ Le composant d’arborescence prend en charge la navigation au clavier.
Le nom du fichier affiché dans l'arborescence.
</ResponseField>

`Tree.File` n'accepte que la prop `name`.
<ResponseField name="highlight" type="boolean" default="false">
Indique si le fichier est mis en évidence comme élément actif.
</ResponseField>
56 changes: 55 additions & 1 deletion zh/components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,54 @@ boost: 3
```


<div id="highlight-the-active-path">
## 突出显示当前路径
</div>

在 `Tree.File` 或 `Tree.Folder` 上添加 `highlight` prop 以标记当前条目。当你在附近正文中引用某个文件或文件夹（例如读者接下来应打开的文件）时，使用它来吸引注意。

突出显示某个文件夹时也会为其后代着色，即使文件夹处于展开状态，当前路径仍然清晰可辨。

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

### 自定义高亮颜色

高亮颜色通过 `--tree-highlight` CSS 变量暴露。在 `Tree` 根组件上设置该变量以覆盖该目录树的颜色。

```mdx 自定义高亮颜色
<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">
## 键盘导航
</div>
Expand Down Expand Up @@ -171,6 +219,10 @@ Tree 组件支持键盘导航。
用户是否可以展开和收起该文件夹。对于不可交互的文件夹，将其设置为 false。
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
文件夹是否作为当前条目突出显示。其后代也会被着色以强化当前路径。
</ResponseField>

<div id="treefile">
### Tree.File
</div>
Expand All @@ -179,4 +231,6 @@ Tree 组件支持键盘导航。
在树状视图中显示的文件名。
</ResponseField>

`Tree.File` 仅接受 `name` prop。
<ResponseField name="highlight" type="boolean" default="false">
文件是否作为当前条目突出显示。
</ResponseField>