Skip to content

TreeView API

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

Component demos

Import

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

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


className

className applied to the root element.

Type:string


defaultCollapseIcon

The default icon used to collapse the node.

Type:node


defaultEndIcon

The default icon displayed next to a end node. This is applied to all tree nodes and can be overridden by the TreeItem icon prop.

Type:node


defaultExpanded

Expanded node ids. Used when the item's expansion is not controlled.

Type:Array<string>

Default:[]


defaultExpandIcon

The default icon used to expand the node.

Type:node


defaultParentIcon

The default icon displayed next to a parent node. This is applied to all parent nodes and can be overridden by the TreeItem icon prop.

Type:node


defaultSelected

Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string.

Type:Array<string>
| string

Default:[]


disabledItemsFocusable

If true, will allow focus on disabled items.

Type:bool

Default:false


disableSelection

If true selection is disabled.

Type:bool

Default:false


expanded

Expanded node ids. Used when the item's expansion is controlled.

Type:Array<string>


id

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.

Type:string


multiSelect

If true ctrl and shift will trigger multiselect.

Type:bool

Default:false


onNodeFocus

Callback fired when tree items are focused.

Type:func

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.

onNodeSelect

Callback fired when tree items are selected/unselected.

Type:func

Signature:
function(event: React.SyntheticEvent, nodeIds: Array | string) => void
  • event The event source of the callback
  • nodeIds Ids of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

onNodeToggle

Callback fired when tree items are expanded/collapsed.

Type:func

Signature:
function(event: React.SyntheticEvent, nodeIds: array) => void
  • event The event source of the callback.
  • nodeIds The ids of the expanded nodes.

selected

Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.

Type:any


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


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.


CSS classes

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

.MuiTreeView-root

Styles applied to the root element.

Rule name:root



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