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.

Demos

Import

import { TreeItem } from '@mui/x-tree-view/TreeItem';
// or
import { TreeItem } from '@mui/x-tree-view';
// or
import { TreeItem } from '@mui/x-tree-view-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
itemId*string-

The id of the item.

childrennode-

The content of the component.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

ContentComponentelement typeTreeItemContent

The component used to render the content of the item.

ContentPropsobject-

Props applied to ContentComponent.

disabledboolfalse

If true, the item is disabled.

labelnode-

The tree item label.

onFocusunsupportedProp-

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

onKeyDownfunc-

Callback fired when a key of the keyboard is pressed on the item.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

sxArray<func
| object
| bool>
| func
| object
-

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

See the `sx` page for more details.

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

Slot nameClass nameDefault componentDescription
collapseIconThe icon used to collapse the item.
expandIconThe icon used to expand the item.
endIconThe icon displayed next to an end item.
iconThe icon to display next to the tree item's label.
groupTransition.MuiTreeItem-groupTransitionTreeItem2GroupThe component that animates the appearance / disappearance of the item's children.

CSS classes

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

Class nameRule nameDescription
.Mui-disabledState class applied to the element when disabled.
.Mui-expandedState class applied to the content element when expanded.
.Mui-focusedState class applied to the content element when focused.
.Mui-selectedState class applied to the content element when selected.
.MuiTreeItem-checkboxcheckboxStyles applied to the checkbox element.
.MuiTreeItem-contentcontentStyles applied to the content element.
.MuiTreeItem-dragAndDropOverlaydragAndDropOverlayStyles applied to the drag and drop overlay.
.MuiTreeItem-editableeditableStyles applied to the content of the items that are editable.
.MuiTreeItem-editingeditingStyles applied to the content element when editing is enabled.
.MuiTreeItem-iconContainericonContainerStyles applied to the tree item icon.
.MuiTreeItem-labellabelStyles applied to the label element.
.MuiTreeItem-labelInputlabelInputStyles applied to the input element that is visible when editing is enabled.
.MuiTreeItem-rootrootStyles applied to the root element.

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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.