---
meta:
title: Tree Item
description: A tree item serves as a hierarchical node that lives inside a tree.
layout: component
---
```html:preview
Item 1
Item A
Item B
Item C
Item 2
Item 3
```
```jsx:react
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
const App = () => (
Item 1
Item A
Item B
Item C
Item 2
Item 3
);
```
## Examples
### Nested tree items
A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
```html:preview
Item 1
Item A
Item Z
Item Y
Item X
Item B
Item C
Item 2
Item 3
```
```jsx:react
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
const App = () => (
Item 1
Item A
Item Z
Item Y
Item X
Item B
Item C
Item 2
Item 3
);
```
### Selected
Use the `selected` attribute to select a tree item initially.
```html:preview
Item 1
Item A
Item B
Item C
Item 2
Item 3
```
```jsx:react
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
const App = () => (
Item 1
Item A
Item B
Item C
Item 2
Item 3
);
```
### Expanded
Use the `expanded` attribute to expand a tree item initially.
```html:preview
Item 1
Item A
Item Z
Item Y
Item X
Item B
Item C
Item 2
Item 3
```
```jsx:react
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
const App = () => (
Item 1
Item A
Item Z
Item Y
Item X
Item B
Item C
Item 2
Item 3
);
```