Skip to content

TreeItem API

API reference docs for the React TreeItem component. Learn about the props, CSS, and other APIs of this exported module.

Component demos

Import

import { TreeItem } from '@mui/x-tree-view/TreeItem';
// or
import { TreeItem } from '@mui/x-tree-view';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

nodeIdRequired

The id of the node.

Type:string

children

The content of the component.

Type:node

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

className

className applied to the root element.

Type:string

collapseIcon

The icon used to collapse the node.

Type:node

ContentComponent

The component used for the content node.

Type:element type

Default:TreeItemContent

ContentProps

Props applied to ContentComponent.

Type:object

disabled

If true, the node is disabled.

Type:bool

endIcon

The icon displayed next to an end node.

Type:node

expandIcon

The icon used to expand the node.

Type:node

icon

The icon to display next to the tree node's label.

Type:node

label

The tree node label.

Type:node

onFocus

This prop isn't supported. Use the onNodeFocus callback on the tree if you need to monitor a node's focus.

Type:unsupportedProp

sx

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:Array<func
| object
| bool>
| func
| object

TransitionComponent

The component used for the transition. Follow this guide to learn more about the requirements for this component.

Type:elementType

Default:Collapse

TransitionProps

Props applied to the transition element. By default, the element is based on this Transition component.

Type:object

The ref is forwarded to the root element.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiTreeItem-root

Styles applied to the root element.

Rule name:root

.MuiTreeItem-group

Styles applied to the transition component.

Rule name:group

.MuiTreeItem-content

Styles applied to the content element.

Rule name:content

.Mui-expandedSTATE

State class applied to the content element when expanded.

Rule name:expanded

.Mui-selectedSTATE

State class applied to the content element when selected.

Rule name:selected

.Mui-focusedSTATE

State class applied to the content element when focused.

Rule name:focused

.Mui-disabledSTATE

State class applied to the element when disabled.

Rule name:disabled

.MuiTreeItem-iconContainer

Styles applied to the tree node icon.

Rule name:iconContainer

.MuiTreeItem-label

Styles applied to the label element.

Rule name:label


You can override the style of the component using one of these customization options: