# TreeView
A tree view provides users with a way to navigate nested hierarchical information.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
DocumentsProject AWeekly ReportREADME
```
## Content
`TreeView` follows the [Collection Components API](collections.html?component=TreeView), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a recursive function to render the children.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection} from '@react-spectrum/s2';
let items = [
{id: 1, title: 'Documents', type: 'directory', children: [
{id: 2, title: 'Project', type: 'directory', children: [
{id: 3, title: 'Weekly Report', type: 'file', children: []},
{id: 4, title: 'Budget', type: 'file', children: []}
]}
]},
{id: 5, title: 'Photos', type: 'directory', children: [
{id: 6, title: 'Image 1', type: 'file', children: []},
{id: 7, title: 'Image 2', type: 'file', children: []}
]}
];
{function renderItem(item) {
return (
{item.title}
{/*- begin highlight -*/}
{/* recursively render children */}
{renderItem}
{/*- end highlight -*/}
);
}}
```
### Slots
`TreeViewItemContent` supports icons, `Text`, [ActionMenu](ActionMenu.html), and [ActionButtonGroup](ActionButtonGroup.html) as children.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection, ActionMenu, MenuItem, Text} from '@react-spectrum/s2';
import Folder from '@react-spectrum/s2/icons/Folder';
import File from '@react-spectrum/s2/icons/File';
import Edit from '@react-spectrum/s2/icons/Edit';
import Delete from '@react-spectrum/s2/icons/Delete';
let items = [
{id: 1, title: 'Documents', type: 'directory', children: [
{id: 2, title: 'Project', type: 'directory', children: [
{id: 3, title: 'Weekly Report', type: 'file', children: []},
{id: 4, title: 'Budget', type: 'file', children: []}
]}
]},
{id: 5, title: 'Photos', type: 'directory', children: [
{id: 6, title: 'Image 1', type: 'file', children: []},
{id: 7, title: 'Image 2', type: 'file', children: []}
]}
];
{function renderItem(item) {
return (
{/*- begin highlight -*/}
{item.type === 'directory' ? : }
{item.title}
{/*- end highlight -*/}
{renderItem}
);
}}
```
### Asynchronous loading
Use [renderEmptyState](#empty-state) to display a spinner during initial load. To enable infinite scrolling, render a `` at the end of each ``.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useAsyncList} from 'react-stately';
interface Character {
name: string
}
function AsyncLoadingExample() {
let starWarsList = useAsyncList({
async load({signal, cursor}) {
if (cursor) {
cursor = cursor.replace(/^http:\/\//i, 'https://');
}
let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
let json = await res.json();
return {
items: json.results,
cursor: json.next
};
}
});
let pokemonList = useAsyncList({
async load({signal, cursor, filterText}) {
let res = await fetch(
cursor || `https://pokeapi.co/api/v2/pokemon`,
{signal}
);
let json = await res.json();
return {
items: json.results,
cursor: json.next
};
}
});
return (
Pokemon
{(item) => (
{item.name}
)}
{/*- begin highlight -*/}
{/*- end highlight -*/}
Star Wars
{(item) => (
{item.name}
)}
{/*- begin highlight -*/}
{/*- end highlight -*/}
);
}
```
### Links
Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework. See the [selection guide](selection.html?component=Tree#selection-behavior) for more details.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
BulbasaurIvysaurVenusaur
```
### Empty state
Use `renderEmptyState` to render placeholder content when the tree is empty.
```tsx
import {TreeView, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';
(
No resultsPress here for more info.
)}>
{/*- end highlight -*/}
{[]}
```
## Selection and actions
Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.html?component=Tree) for more details.
```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
function Example(props) {
let [selected, setSelected] = useState(new Set());
return (