Skip to content

TreeItem2 API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
itemId*string-

The id of the item. Must be unique.

childrennode-

The content of the component.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

disabledboolfalse

If true, the item is disabled.

idstring-

The id attribute of the item. If not provided, it will be generated.

labelnode-

The label of the item.

onBlurfunc-

Callback fired when the item root is blurred.

onFocusunsupportedProp-

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

onKeyDownfunc-

Callback fired when a key is pressed on the keyboard and the tree is in focus.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

The component cannot hold a ref.

Slots

Slot nameClass nameDefault componentDescription
root.MuiTreeItem2-rootTreeItem2RootThe component that renders the root.
content.MuiTreeItem2-contentTreeItem2ContentThe component that renders the content of the item. (e.g.: everything related to this item, not to its children).
groupTransition.MuiTreeItem2-groupTransitionTreeItem2GroupTransitionThe component that renders the children of the item.
iconContainer.MuiTreeItem2-iconContainerTreeItem2IconContainerThe component that renders the icon.
checkbox.MuiTreeItem2-checkboxTreeItem2CheckboxThe component that renders the item checkbox for selection.
label.MuiTreeItem2-labelTreeItem2LabelThe component that renders the item label.
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.

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.

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