Skip to content
Edit this page

TreeView API

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:

Import

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

Type:

object
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. (Uncontrolled)

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. (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, value: string) => void
  • event The event source of the callback Warning: This is a generic event not a focus event.
  • 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:

Array<string> | string
sx

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

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

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiTreeView-rootroot

Styles applied to the root element.

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