Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey

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

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

Default:false

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

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

See Slots API below for more details.

Type:object

Default:{}

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.

Theme default props

You can use MuiTreeItem to change the default props of this component with the theme.

Slots

collapseIcon

The icon used to collapse the node.

expandIcon

The icon used to expand the node.

endIcon

The icon displayed next to an end node.

icon

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

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

.Mui-disabledSTATE

State class applied to the element when disabled.

.Mui-expandedSTATE

State class applied to the content element when expanded.

.Mui-focusedSTATE

State class applied to the content element when focused.

.Mui-selectedSTATE

State class applied to the content element when selected.

.MuiTreeItem-content

Styles applied to the content element.

Rule name:content

.MuiTreeItem-group

Styles applied to the transition component.

Rule name:group

.MuiTreeItem-iconContainer

Styles applied to the tree node icon.

Rule name:iconContainer

.MuiTreeItem-label

Styles applied to the label element.

Rule name:label

.MuiTreeItem-root

Styles applied to the root element.

Rule name:root


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