RichTreeView API

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

Component demos

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

Import

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
// or
import { RichTreeView } 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.

Name	Type	Default	Description
apiRef	{ current?: { focusNode: func, getItem: func } }	-	The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
classes	object	-	Override or extend the styles applied to the component. See CSS API below for more details.
defaultExpandedNodes	Array<string>	[]	Expanded node ids. Used when the item's expansion is not controlled.
defaultSelectedNodes	any	[]	Selected node 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.
expandedNodes	Array<string>	-	Expanded node ids. Used when the item's expansion is controlled.
getItemId	func	`(item) => item.id`	Used to determine the string label for a given item. Signature:`function(item: R) => string` `item` The item to check. Returns: The id of the item.
getItemLabel	func	`(item) => item.label`	Used to determine the string label for a given item. Signature:`function(item: R) => string` `item` The item to check. Returns: The label of the item.
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.
isItemDisabled	func	-	Used to determine if a given item should be disabled. Signature:`function(item: R) => boolean` `item` The item to check. Returns: `true` if the item should be disabled.
multiSelect	bool	false	If true `ctrl` and `shift` will trigger multiselect.
onExpandedNodesChange	func	-	Callback fired when tree items are expanded/collapsed. Signature:`function(event: React.SyntheticEvent, nodeIds: array) => void` `event` The event source of the callback. `nodeIds` The ids of the expanded nodes.
onNodeExpansionToggle	func	-	Callback fired when a tree item is expanded or collapsed. Signature:`function(event: React.SyntheticEvent, nodeId: array, isExpanded: array) => void` `event` The event source of the callback. `nodeId` The nodeId of the modified node. `isExpanded` `true` if the node has just been expanded, `false` if it has just been collapsed.
onNodeFocus	func	-	Callback fired when tree items are focused. Signature:`function(event: React.SyntheticEvent, nodeId: string, value: string) => void` `event` The event source of the callback Warning: This is a generic event not a focus event. `nodeId` The id of the node focused. `value` of the focused node.
onNodeSelectionToggle	func	-	Callback fired when a tree item is selected or deselected. Signature:`function(event: React.SyntheticEvent, nodeId: array, isSelected: array) => void` `event` The event source of the callback. `nodeId` The nodeId of the modified node. `isSelected` `true` if the node has just been selected, `false` if it has just been deselected.
onSelectedNodesChange	func	-	Callback fired when tree items are selected/deselected. Signature:`function(event: React.SyntheticEvent, nodeIds: Array \| string) => void` `event` The event source of the callback `nodeIds` The ids of the selected nodes. When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
selectedNodes	any	-	Selected node 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 MuiRichTreeView to change the default props of this component with the theme.

Slots

Slot name	Class name	Default component	Description
root	.MuiRichTreeView-root	`RichTreeViewRoot`	Element rendered at the root.
item		`TreeItem.`	Custom component for the item.
collapseIcon			The default icon used to collapse the node.
expandIcon			The default icon used to expand the node.
endIcon			The default icon displayed next to an end node. This is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.