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.

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.



This component has been deprecated in favor of the new SimpleTreeView 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.

NameTypeDefaultDescription
apiRef{ current?: { focusItem: func, getItem: func } }-

The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef().

childrennode-

The content of the component.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

defaultExpandedItemsArray<string>[]

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

defaultSelectedItemsany[]

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

disabledItemsFocusableboolfalse

If true, will allow focus on disabled items.

disableSelectionboolfalse

If true selection is disabled.

expandedItemsArray<string>-

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

idstring-

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.

multiSelectboolfalse

If true ctrl and shift will trigger multiselect.

onExpandedItemsChangefunc-

Callback fired when tree items are expanded/collapsed.

Signature:function(event: React.SyntheticEvent, itemIds: array) => void
  • event The event source of the callback.
  • itemIds The ids of the expanded items.
onItemExpansionTogglefunc-

Callback fired when a tree item is expanded or collapsed.

Signature:function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void
  • event The event source of the callback.
  • itemId The itemId of the modified item.
  • isExpanded true if the item has just been expanded, false if it has just been collapsed.
onItemFocusfunc-

Callback fired when tree items are focused.

Signature:function(event: React.SyntheticEvent, itemId: string, value: string) => void
  • event The event source of the callback Warning: This is a generic event not a focus event.
  • itemId The id of the focused item.
  • value of the focused item.
onItemSelectionTogglefunc-

Callback fired when a tree item is selected or deselected.

Signature:function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void
  • event The event source of the callback.
  • itemId The itemId of the modified item.
  • isSelected true if the item has just been selected, false if it has just been deselected.
onSelectedItemsChangefunc-

Callback fired when tree items are selected/deselected.

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

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

slotPropsobject-

The props used for each component slot.

slotsobject-

Overridable component slots.

See Slots API below for more details.

sxArray<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 nameClass nameDefault componentDescription
root.MuiTreeView-rootSimpleTreeViewRootElement rendered at the root.
collapseIconThe default icon used to collapse the node.
expandIconThe default icon used to expand the node.
endIconThe 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.