TreeView API

This API is deprecated.

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

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Tree View - Getting Started

Import

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

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

This component has been deprecated in favor of the new Simple Tree View component. You can have a look at how to migrate to the new component in the v7 migration guide

Props

Props of the native component are also available.

Name	Type	Default	Description
apiRef	{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func } }	-	The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
checkboxSelection	bool	false	If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
children	node	-	The content of the component.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
defaultExpandedItems	Array<string>	[]	Expanded item ids. Used when the item's expansion is not controlled.
defaultSelectedItems	any	[]	Selected item ids. (Uncontrolled) When `multiSelect` is true this takes an array of strings; when false (default) a string.
disabledItemsFocusable	bool	false	If `true`, will allow focus on disabled items.
disableSelection	bool	false	If `true` selection is disabled.
expandedItems	Array<string>	-	Expanded item ids. Used when the item's expansion is controlled.
expansionTrigger	'content' \| 'iconContainer'	'content'	The slot that triggers the item's expansion when clicked.
experimentalFeatures	{ indentationAtItemLevel?: bool }	-	Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
itemChildrenIndentation	number \| string	12px	Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em".
multiSelect	bool	false	If `true`, `ctrl` and `shift` will trigger multiselect.
onExpandedItemsChange	func	-	Callback fired when Tree Items are expanded/collapsed. Signature:`function(event: React.SyntheticEvent, itemIds: array) => void` `event` The DOM event that triggered the change. `itemIds` The ids of the expanded items.
onItemClick	func	-	Callback fired when the `content` slot of a given Tree Item is clicked. Signature:`function(event: React.MouseEvent, itemId: string) => void` `event` The DOM event that triggered the change. `itemId` The id of the focused item.
onItemExpansionToggle	func	-	Callback fired when a Tree Item is expanded or collapsed. Signature:`function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void` `event` The DOM event that triggered the change. `itemId` The itemId of the modified item. `isExpanded` `true` if the item has just been expanded, `false` if it has just been collapsed.
onItemFocus	func	-	Callback fired when a given Tree Item is focused. Signature:`function(event: React.SyntheticEvent \| null, itemId: string) => void` `event` The DOM event that triggered the change. Warning: This is a generic event not a focus event. `itemId` The id of the focused item.
onItemSelectionToggle	func	-	Callback fired when a Tree Item is selected or deselected. Signature:`function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void` `event` The DOM event that triggered the change. `itemId` The itemId of the modified item. `isSelected` `true` if the item has just been selected, `false` if it has just been deselected.
onSelectedItemsChange	func	-	Callback fired when Tree Items are selected/deselected. Signature:`function(event: React.SyntheticEvent, itemIds: Array \| string) => void` `event` The DOM event that triggered the change. `itemIds` The ids of the selected items. When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
selectedItems	any	-	Selected item ids. (Controlled) When `multiSelect` is true this takes an array of strings; when false (default) a string.
slotProps	object	-	The props used for each component slot.
slots	object	-	Overridable component slots. See Slots API below for more details.
sx	Array<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 MuiTreeView to change the default props of this component with the theme.

Slots

Slot name	Class name	Default component	Description
root	.MuiTreeView-root	`SimpleTreeViewRoot`	Element rendered at the root.
collapseIcon			The default icon used to collapse the item.
expandIcon			The default icon used to expand the item.
endIcon			The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.

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.