MUI X Tree View

The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

Available components

The MUI X Tree View package exposes two different versions of the component:

Simple Tree View

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

The simple version of the Tree View component receives its items as JSX children. This is the recommended version for hardcoded items.

Rich Tree View

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

The rich version of the Tree View component receives its items dynamically from an external data source. This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization.

Tree Item components

The @mui/x-tree-view package exposes two different components to define your tree items:

• TreeItem
• TreeItem2

TreeItem

This is the long-standing component that is very similar to the one used in previous versions (@mui/x-tree-view@6 and @mui/lab).

When using SimpleTreeView, you can import it from @mui/x-tree-view/TreeItem and use it as a child of the SimpleTreeView component:

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function App() {
  return (
    <SimpleTreeView>
      <TreeItem itemId="1" label="Item 1" />
      <TreeItem itemId="2" label="Item 2" />
    </SimpleTreeView>
  );
}

When using RichTreeView, you don't have to import anything; it's the default component used to render the items:

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

export default function App() {
  return <RichTreeView items={ITEMS} />;
}

TreeItem2

This is a new component that provides a more powerful customization API, and will eventually replace TreeItem.

When using SimpleTreeView, you can import it from @mui/x-tree-view/TreeItem2 and use it as a child of the SimpleTreeView component:

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';

export default function App() {
  return (
    <SimpleTreeView>
      <TreeItem2 itemId="1" label="Item 1" />
      <TreeItem2 itemId="2" label="Item 2" />
    </SimpleTreeView>
  );
}

When using RichTreeView, you can import it from @mui/x-tree-view/TreeItem2 and pass it as a slot of the RichTreeView component:

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';

export default function App() {
  return <RichTreeView items={ITEMS} slots={{ item: TreeItem2 }} />;
}